(cache)Not Footnotes

Users can click annotated text to toggle the visibility of a note (which elaborates on a fragment of text with citations, links, examples, references, or explanations), and select (because notes exists as real elements, not CSS pseudo elements) or copy (in the expected and presented order) any visible text on a page. Notes can show on load (when appropriate) and a user can show all notesshow only manually opened notes in one click. This gives the user control over what they see (all, some or no notes) and what they find (either all text, or only main text and text in 'open' notes).

Paragraph Notes

A similar approach can offer paragraph notes for different benefits. To keep a page uncluttered, the code can optionally show only one note at a time.

X Paragraph notes immediately follow the paragraph that holds the text they annotate. Benefits

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.

Implementation

A JS snippet can convert simple markup to the above note styles easily.

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

Some Alternatives to Footnotes

Using HTML + CSS Only. No JavaScript.

Inline Notes

Paragraph Notes

Implementation