whatwg
Native Footnote/Endnote Element in HTML
What problem are you trying to solve?
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.
For many kinds of web content, like scholarly publishing and academic journals, the inclusion of correctly formatted footnotes and citations is not merely stylistic but a strict requirement for publication. These communities are currently forced to rely on semantically inadequate workarounds to meet their professional standards on the web.
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
idattributes,hrefvalues, and reciprocal links. This process is error-prone and tedious, discouraging the use of footnotes.
How would you solve it?
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
hrefvalue MUST be a fragment identifier that matches theidof a<note>element in the same document (e.g.,href="#fn1"). -
For inter-document notes, the
hrefvalue 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>
Anything else?
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.
There is also a parallel work for note presentation in CSSWG (as detailed in https://github.com/w3c/csswg-drafts/issues/12472). In its "Clarification about HTML elements" section, the issues states:
The W3C doesn't provide a dedicated way to tag notes in HTML [...] none of them seem to have unanimous agreement.
It further highlights the limitations of existing methods and the need for a foundational HTML solution.
Recent article of @jakearchibald with lots of insights on this topic: https://jakearchibald.com/2025/give-footnotes-the-boot/
They allow authors to provide context or cite sources without disrupting the main narrative flow.
Obviously, I disagree with this statement 😄
From a reading experience perspective, footnotes do have many problems and should not be used in many situations. However, many of the issues mentioned in Jake's article, such as accessibility and user experience, will be easier to mitigate with dedicated footnote markup.
Some websites, such as academic journals, require footnotes when displayed on the web.
Wouldn't reusing rel be enough? rel=footnote was even considered back in HTML 4.0: https://www.w3.org/TR/relations.html
Wouldn't reusing
relbe enough?rel=footnotewas even considered back in HTML 4.0: https://www.w3.org/TR/relations.html
Yeah, it is logical and has historical precedent.
However, IIUC it would be insufficient because it only solves one part of a multi-faceted problem. It addresses the relationship of the link but fails to address the more fundamental issues of text association and authoring automation.
The primary advantage of rel is that it adds a clear semantic meaning to the link itself. A user agent, search engine, or assistive technology could parse rel="footnote" and understand that this is not a generic hyperlink but one that points to an annotation. This is a clear improvement over the current situation.
Despite the benefit above, it fails to resolve the most critical problems that motivated the creation of this proposal: it does not fix the broken association with the content.
This proposal solves this by providing a semantic container for the footnote content, allowing user agents to identify it as such (e.g., for styling, accessibility, or other kinds of processing).
Also, another goal of a this proposal is to simplify the authoring process. The rel="footnote" approach provides no automation benefits. The author must still manually number the footnotes ([1], [2], [3]), manually manage ids and ensure they match the href, manually create reciprocal links to return the user to the point of reference, and manually re-number all subsequent footnotes if one is inserted or removed in the middle of the document.
This proposal allows the user agent to handle all of this automatically via CSS counters and built-in behaviors, reducing authoring effort and the potential for error.