A Step-by-Step Guide to Adding HTML Footnotes

Creating footnotes in HTML can greatly enhance the readability and accessibility of your web content. Footnotes allow you to provide additional information without cluttering the main text.

This blog will explain how to create HTML footnotes effectively using various HTML tags and attributes.

Understanding Footnotes in HTML

Footnotes are references placed at the bottom of the page, providing additional context or information related to the text. In HTML, you can create footnotes by using a combination of anchors, ID attributes, and href attributes to link the footnote numbers in the text to the corresponding footnote text at the bottom of the page.

Step-by-Step Guide to Creating Footnotes

1. Adding Footnote Markers in Your Text

The first step is to place footnote markers in your text. These markers are typically superscript numbers or symbols that link to the footnote text.

1<p>This is a sample sentence with a footnote marker<sup><a href="#fn1" id="ref1">1</a></sup>.</p>

Here, the href attribute in the a tag points to the id of the corresponding footnote, and the id attribute uniquely identifies the reference.

2. Writing the Footnote Text

Next, you need to write the footnote text at the bottom of the page. Each footnote should be clearly numbered and linked back to the reference in the main text.

1<div id="footnotes">
2    <ol>
3        <li id="fn1">This is the text for the first footnote. <a href="#ref1">↩</a></li>
4    </ol>
5</div>

​

In this example, the id attribute on the li element matches the href attribute of the footnote marker. The a tag with the href="#ref1" attribute creates a link back to the footnote marker, providing a way for readers to scroll back up.

3. Organizing Multiple Footnotes

When you have multiple footnotes, you need to ensure each footnote number and reference are unique.

1<p>This is another sentence with a footnote marker<sup><a href="#fn2" id="ref2">2</a></sup>.</p>
2...
3<div id="footnotes">
4    <ol>
5        <li id="fn1">This is the text for the first footnote. <a href="#ref1">↩</a></li>
6        <li id="fn2">This is the text for the second footnote. <a href="#ref2">↩</a></li>
7    </ol>
8</div>

​

4. Ensuring Accessibility

To improve accessibility, ensure that the footnote links are easily navigable and that screen readers can interpret them correctly.

1<p>This is a sentence with an accessible footnote marker<sup><a href="#fn1" id="ref1" aria-describedby="fn1">1</a></sup>.</p>
2...
3<div id="footnotes">
4    <ol>
5        <li id="fn1">This is the text for the first footnote. <a href="#ref1" aria-label="Back to reference">↩</a></li>
6    </ol>
7</div>

​

Using the aria-describedby and aria-label attributes helps screen readers provide better context to users.

5. Styling Footnotes with CSS

You can enhance the visual appeal of your footnotes using CSS.

1<style>
2    sup a {
3        text-decoration: none;
4    }
5    #footnotes {
6        font-size: 0.8em;
7    }
8    #footnotes ol {
9        list-style-type: decimal;
10    }
11    #footnotes a {
12        text-decoration: none;
13    }
14</style>

​

This CSS example removes the underline from footnote markers and sets a smaller font size for the footnote text.

6. JavaScript for Smooth Scrolling

For a smoother user experience, you can add JavaScript to enable smooth scrolling when footnotes are clicked.

1<script>
2document.querySelectorAll('a[href^="#"]').forEach(anchor => {
3    anchor.addEventListener('click', function(e) {
4        e.preventDefault();
5        document.querySelector(this.getAttribute('href')).scrollIntoView({
6            behavior: 'smooth'
7        });
8    });
9});
10</script>

​

This script ensures that when a footnote link is clicked, the page smoothly scrolls to the corresponding footnote.

Conclusion

Creating footnotes in HTML involves using anchor tags (<a>), the id attribute, and proper linking between the main text and footnotes. By following these steps and best practices, you can ensure that your HTML footnotes are both functional and accessible, enhancing the overall user experience on your web page.

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.