[clreq] Proposal for a Native Footnote Element in HTML (#718)

xfq has just created a new issue for https://github.com/w3c/clreq:

== Proposal for a Native Footnote Element in HTML ==
Based on our previous meeting, I wrote a draft on adding footnotes in HTML. Please take a look and see if there are any omissions:

-----

For centuries, footnotes 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:

```html
<a href="#footnote-1">[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:

1. 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.

2. 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.

3. 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.

4. 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 the introduction of two new elements that work in tandem:

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

The connection between these elements can be established via an `id` attribute on the `<note>` element and a corresponding `for` attribute on the `<noteref>` element.

Example:

```html
<p>
  The theory of <noteref for="fn-relativity">Special Relativity</noteref> revolutionized our understanding of space and time.
</p>

...

<footer>
  <h3>Notes</h3>
  <ol>
    <note id="fn-relativity">
      <p>Published by Albert Einstein in his 1905 paper "On the Electrodynamics of Moving Bodies".</p>
    </note>
  </ol>
</footer>
```

`<noteref for="fn-relativity">` delineates "Special Relativity" as the text being annotated, and the browser's user-agent stylesheet can be responsible for automatically generating and appending a numbered or symbolic marker (e.g., `[1]`) via a pseudo-element like `::after`. This marker would function as a link to the corresponding `<note>` element.

`<note id="fn-relativity">` contains the full footnote content.

#### 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](https://www.w3.org/TR/css-gcpm-3/) already explores concepts like `::footnote-call` and `::footnote-marker` which could be adapted for this purpose.

Please view or discuss this issue at https://github.com/w3c/clreq/issues/718 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 3 November 2025 13:26:16 UTC