Jacob Paris
← Back to all content

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

1<p id="reference">
2 You can afford a $1,000,000 house<a
3 href="#footnote"
4 title="By house, we mean studio apartment, and by can, we mean can't."
5 >*</a
6 >
7</p>
8
9<p id="footnote">
10 <a href="#reference"> * </a>
11 By house, we mean studio apartment, and by can,
12 we mean can't.
13</p>
14

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.

Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.