Footnotes in HTML

| tech

Footnotes are a nuisance. If you notice one of those little superscript numbers in a text, you have to decide whether whatever the author has to say that didn't make it into the main text is worth interrupting your flow. You could ignore it, but maybe you miss out on something interesting. So you abandon the sentence you're reading and look for the damn footnote. After you found and read it, you're searching for the place where you left off and struggle to remember what the last sentence was about. Of course you have to reread the sentence.

An elegant solution to the problem are sidenotes. Unfortunately, they are almost impossible to get right for all screen sizes and devices without a CSS or Javascript framework, or without writing a lot of custom code. Since I'm writing plain HTML and I want to keep it simple, this is not an option for me. Some people have experimented with HTML's details and ruby elements, but I don't like that the text jumps around when you open them and the details element auto-closes the paragraph. Still, I like writing little asides, so I keep using those annoying footnotes, but make them a bit more tolerable.1

My footnotes are bidirectional links. The markup for the reference in the text above looks like this:

<sup><a id="fn-1" href="#1">1</a></sup>
The markup for the footnote at the end of the page looks like this:
<p class="footnote">
<sup><a id="1" href="#fn-1">1</a></sup>
This is an example footnote...
Clicking on the superscript numbers brings you back and forth. I'm not sure whether this is immediately clear to every reader, but it's the maximal amount of markup I'm willing to write, and it seems like a fairly common approach.

If the distance between a footnote and its reference in the text is short, there might not be any jump if you click on the superscript number. Then it seems like the link doesn't do anything and the reader has to scan the page to find the position. For these cases, I added a little bit of CSS that highlights the target superscript number.

:target {
  color: red;

If you know of a better solution that is as simple, please let me know.

1 This is an example footnote. Click on the number to jump back to where it's referenced in the text.