Some Alternatives to Footnotes

Using HTML + CSS Only. No JavaScript.

Inline Notes

Users can click annotated text to toggle the visibility of , and or any visible text on a page. Notes can and a user can in one click. This gives the user control over and .

Paragraph Notes

Example 1

A similar approach can produce which have . To keep a page uncluttered, the code can optionally show only .

Paragraph notes immediately follow the paragraph that holds the text they annotate. Features
  • Paragraph notes don't reflow the paragraph text when toggled.
  • Because they appear separately, they can hold more content if needed.
  • CSS can control how and where paragraph notes appear. For example, optionally as 'side-notes' in wide viewports.
  • Small code changes can make paragraph notes always shown.
 By using radio buttons instead of checkboxes.

Depending on the style wanted, CSS can omit or show note numbers, instead of (or in addition to) styling the annotated text. It can also reset numbering per paragraph, or continue throughout a page.

Traditional jump links can implement paragraph notes too, but would add entries to the browser tab history.

Example 2 - Checkbox paragraph notes

A JS snippet can convert to the above note styles .

Markup For example [text with a note]{the note text}. Easily A static site generator could auto-run such a script on build.

Example 3

styles annotated text in the paragraph based on the related . It requires some .

This version: 2025_0706. Note state: Displayed or hidden. CSS per note: The other options use a fixed amount of CSS for any number of notes on a page.