Footnotes are one of the few pieces of typography that the web would appear to have neglected: there is an argument to be made that hyperlinks have made footnotes irrelevant. However, there will always be a role for removing sections of explanatory text that may distract the flow of reading.

The first recreation of the functionality of footnotes on the web, and simplest, is to create semantic markup with inline tags, such as <acronym>, <abbr>, <cite> and <dfn>. All of these use the title attribute to add information (such as the meaning of the inline definition). title can be used on almost any element, including <img> and <a>, to do the same thing. The title attribute does have a few disadvantages: its text is not immediately visible on the screen, and there is a limit to the number of characters that can be displayed from the attribute value in most browsers. (In other words, you can’t get away with a paragraph of information in the title attribute value).

More traditional methods keep the footnotes separate from the main body of text, at the bottom of the page. Creating the footnotes themselves is easy: they are just an ordered list:

1. <ol id=footnotes">
2. <li id=footnote1"><cite>Capuchin Monkeys and their Kin in Film</cite>,
3. Miriam Krebs, 1997</li>
4. <li id=footnote2"><cite>Y: The Last Man</cite>,
5. Brian K. Vaughan, Pia Guerra, 2002 - 2008</li>
6. </ol>

In the main body text, we want a number that links to the position of this footnote:

1. <p>Capuchin monkeys have had starring roles in many films, including
2. <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum
3. </cite><a href="#footnote1"
4. rel="footnote">¹</a>.
5. They’ve appeared in graphic novels, such as “Ampersand” in
6. <cite>Y: The Last Man</cite><a href="#footnote2"
7. rel="footnote">²</a>.</p>

We use <sup> to raise the “1” above the baseline and reduce its size. <sup> is superscript; <sub> is subscript. We have also added the (relatively rarely used) del attribute with a value of footnote to show that the relationship of the link to its target is that of a footnote. (You may recall that we used the del attribute previously when creating a link to an external stylesheet.)

This is a good solution, but there’s a problem. Adding new footnotes to the bottom of a page is not a big issue; the ordered list will rearrange itself accordingly, even if the new item was added in the middle of the list. But if we add a footnote into the body text, we would have to re-number footnotes that appear after it, as the footnote numbers in the body are hardcoded. In other words, if we wanted to add a footnote after “graphic novel” in the body copy, that would become footnote 2. We would then have to increment, by hand, all the footnotes that appeared in the body copy after that point.

There’s a better way, if you’re prepared to use a little CSS2. Write the footnotes as a list, as before. In your body copy, write links as before, but because there could be many possible links in your body copy, give them a class of “foot”. Also, leave the content of the links blank:

1. <p>Capuchin monkeys have had starring roles in many films,
2. including <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum
3. </cite><a href="#footnotes" class="foot"></a>. They’ve appeared in graphic
4. novels, such as “Ampersand” in <cite>Y: The Last Man</cite>
5. <a href="#footnotes" class="foot"></a>.</p>

Then, we want to automatically count the number of times links with a class of “foot” appear in the body, and automatically add this to be the content of the link. We also want to style this content:

1. body { counter-reset: footnotecounter; /* Create a footnote counter scope */ }
2. a.foot { text-decoration: none; outline: none; }
3. a.foot:before { font-size: smaller;
4. margin-left: .5em;
5. vertical-align: super; /* sets the footnote above the baseline */
6. content: counter(footnotecounter);
7. counter-increment: footnotecounter; /* Add 1 to footnote */
8. }

That approach certainly improves things, but there still is a problem. Moving your eyes to the bottom of a printed page to read a footnote is no bother, even if the footnotes were printed as endnotes. But a web page is different, especially if has a lot of body content. Scrolling back and forth to read footnotes in a web page would be frustrating.

A better approach, one that suits the web paradigm, is to re-position the footnotes as “side notes”. This means removing our original list from the bottom of the page and placing the content of the footnotes inline, inside of the paragraphs, in <span> tags. We’ll also set the footnote hyperlinks to null links:

1. <p>Capuchin monkeys have had starring roles in many films,
2. including <cite>Raiders of the Lost Ark</cite> and <cite>Night At The Museum</cite>
3. <a href="#" class="foot"></
4. a><span><cite>Capuchin Monkeys and their Kin in Film</cite>,
5. Miriam Krebs, 1997</span>. They’ve appeared in graphic novels, such as “Ampersand”
6. in <cite>Y: The Last Man</cite><a href="#" class="foot"></a><span><cite>
7. Y: The Last Man</cite>, Brian K. Vaughan, Pia Guerra, 2002 - 2008</span>.</p>

<span> is an element that you use when you’ve run out of other elements. It’s an inline tag, one that surrounds content that has no other possible context.

More CSS is added:

1. p { margin-right: 16em; }
2. span { visibility: hidden; position: fixed; width: 12em; border: 1px solid #000;
3. background: #dd0; padding: 1em; top: 1em; right: 1em; }
4. a.footnote:focus + span { visibility: visible; }

We’ve given our paragraphs enough room on the right for the new position of our footnotes/sidenotes, and hidden the notes themselves using the same trick we used for our simple gallery. The difference is we’ve set position: fixed, so that the side note always appears in the same location.

In the near future, these solutions are likely to appear a little different once browsers begin to support the footnote and asterisk counting systems for list-style-type that are proposed for CSS3, and I will update this entry once that occurs. Longer term, the concept is likely to be made redundant by the <aside> tag in HTML5, but that is still some way off.