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.


You can afford a $1,000,000 house

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

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

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.