Add footnotes to your content

Footnotes, fine print, disclaimers, citations: these are secondary locations for extra information that doesn't necessarily need to be shown with the same importance of the primary content.

Key points

A footnote should be wrapped in <small> tags to mark them as lower importance information. This does not correlate at all to the font size, despite the misleading tag name. Use the <small> tag regardless of whether or not you intend to display the text at a smaller size.
A footnote should have a unique id attribute
The reference should contain an <a> tag anchored to the footnote's id.

Example

You can afford a $1,000,000 house

html

<p id="reference">
  You can afford a $1,000,000 house<a
    href="#footnote"
    title="By house, we mean studio apartment, and by can, we mean can't."
    >*</a
  >
</p>
<p id="footnote">
  <a href="#reference"> * </a>
  By house, we mean studio apartment, and by can,
  we mean can't.
</p>

Clicking the * on the reference will scroll you to the footnote. It is optional, but recommended to also backlink the footnote to its reference. This is not expected behaviour, but often delightful anyway.

HTML whitespace rules apply, so if you don't want a space before the *, then don't use line breaks or leave spaces around the <a> tag. Both patterns are shown here.

* By house, we mean studio apartment, and by can, we mean can't.