Proposal for a Native Footnote/Endnote Element in HTML

Based on our previous meeting, I wrote a draft on adding footnotes/endnotes in HTML. Please take a look and see if there are any omissions:

For centuries, footnotes and endnotes have been a vital tool for scholarly writing and many other kinds of publications. They allow authors to provide context or cite sources without disrupting the main narrative flow.

In the current HTML standard, there is no semantic way to represent footnotes. We rely on workarounds, most commonly the <a> element, to simulate footnote behavior:

<a href="#footnote-1" class="noteref">[1]</a>

However, this approach treats a contextual annotation as a simple hyperlink.

This proposal introduces a new set of elements, <noteref> and <note>, to give footnotes first-class citizenship on the web.

The Problem

The current method of creating footnotes is a workaround, and it introduces several significant problems:

An <a> element defines a hyperlink. It does not describe the specific relationship of an annotation to a piece of text. The footnote's marker (e.g., [1]) is linked, but the actual text being annotated has no machine-readable connection to the footnote content. This is a missed opportunity for browsers, ereaders, search engines, and assistive technologies to truly understand the structure of the document.
A footnote annotates a span of text—a word, a phrase, or a sentence—not the footnote number itself. The current practice of wrapping the number in an <a> tag fails to create a semantic link between the preceding text and the note. We have a powerful precedent for this kind of association in the <ruby> element, which intrinsically links base text with its annotation. Footnotes deserve the same level of semantic integrity.
For users of assistive technologies, the current implementation is often confusing. A footnote reference is typically announced as "Link, 1", which provides no context about its purpose. While ARIA roles like role="doc-noteref" can be added to patch this, it is an extra burden on authors. A native element would provide a clear, unambiguous signal to screen readers, allowing them to announce "Footnote reference" and provide streamlined navigation.
Authors must manually manage id attributes, href values, and reciprocal links. This process is error-prone and tedious, discouraging the use of footnotes.

Proposed Solution

We propose two new elements that work together to define the structure of a footnote or endnote, relying on a single, well-established attribute for linking.

<noteref>: An element used to wrap the specific text in the document that the footnote annotates. It establishes the "call" to the footnote.
<note>: An element that contains the content of the footnote itself. It is the body of the footnote.

The <noteref> element MUST have an href attribute that specifies the location of its corresponding <note> element.

For intra-document notes, the href value MUST be a fragment identifier that matches the id of a <note> element in the same document (e.g., href="#fn1").
For inter-document notes, the href value MUST be a valid URL pointing to an external document, which may include a fragment identifier to target a specific <note> element (e.g., href="notes.html#fn1").

Markup Examples

Use Case 1: Intra-Document Footnotes (Same Page)

<!DOCTYPE html>
<html>
<head>
  <title>Document with Footnotes</title>
</head>
<body>

  <p>
    The concept of <noteref href="#fn-relativity">Special Relativity</noteref> was introduced in 1905.
    This was a foundational shift in physics<noteref href="#fn-paradigm"></noteref>.
  </p>

  <hr>

  <footer>
    <h3>Notes</h3>
    <ol>
      <note id="fn-relativity">
        <p>Published in Albert Einstein's paper, "On the Electrodynamics of Moving Bodies".</p>
      </note>
      <note id="fn-paradigm">
        <p>See Thomas Kuhn's "The Structure of Scientific Revolutions" for a detailed analysis of paradigm shifts.</p>
      </note>
    </ol>
  </footer>

</body>
</html>

Use Case 2: Inter-Document Endnotes (Separate File)

The href attribute points to an external file and a specific id within it.

File: chapter-one.html

<p>
  All database schemas were normalized to BCNF<noteref href="endnotes.html#note-bcnf"></noteref>.
</p>

File: endnotes.html

<!DOCTYPE html>
<html>
<head>
  <title>Endnotes</title>
</head>
<body>
  <h1>Endnotes for the Publication</h1>
  <ol>
    <note id="note-bcnf">
      <p>Boyce-Codd Normal Form is a normal form used in database normalization to minimize data redundancy.</p>
    </note>
    <!-- ... other notes ... -->
  </ol>
</body>
</html>

Precedent for Semantic Association

Ruby doesn't just place text near other text; it establishes a clear semantic relationship between a base text and its pronunciation or annotation.

Our proposal applies the same core principle. The <noteref> element semantically binds an annotation (the <note>) to the text it describes.

Accessibility Considerations

User agents can provide a default role mapping, such as role="doc-noteref" for <noteref> and role="doc-footnote" for <note>. This would allow screen readers to clearly announce "Footnote reference" and provide users with dedicated navigation commands to jump between references and their corresponding notes, and back again.

Non-Goals

This proposal is intentionally focused on providing a semantic foundation for footnotes.

We do not propose specific rendering requirements (e.g., pop-up tooltips vs. bottom-of-page notes). This should be left to the user agent's default stylesheet and be fully controllable by authors using CSS. css-gcpm already explores concepts like ::footnote-call and ::footnote-marker which could be adapted for this purpose.

Description

The Problem

Proposed Solution

Markup Examples

Precedent for Semantic Association

Accessibility Considerations

Non-Goals

Contributor guide

First steps

Research direction

Assessment

Proposal for a Native Footnote/Endnote Element in HTML

Description

The Problem

Proposed Solution

Markup Examples

Precedent for Semantic Association

Accessibility Considerations

Non-Goals

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox