Jesper Tverskov, August 25, 2006

The benefits of footnotes in webpages

Good old footnotes are undervalued in webpages. Even serious commentary and longer articles and reports often use mediocre tooltips made with the title attribute as a poor substitute. Footnotes are much more usable and accessible.

Most webpages being quick and dirty or short and to the point, don't need footnotes. Even in longer and more academic writing footnotes should only be used for important additional information that can be ignored in the first run.

1. Why the title attribute is 99% bad

Many webpage authors wrongly believe that so-called "tooltips" made with the title attribute are the "footnotes" of the web, the more modern way. But the title attribute has grave shortcomings: [1]

  1. You need a mouse to get to the tooltip of the title attribute. Keyboard users have no access to the title attribute in most browsers. Users of screen readers and magnifiers are an exception. [2]
  2. Users have no easy way of knowing that the title attribute has been used. In extreme cases the mouse pointer must be hovered all over the webpage, line for line, word for word, to find out if additional information pops up as tooltips.
  3. In most browsers tooltips are only shown for a few seconds before they must be reactivated making them difficult to use for many users, especially if the tooltip is longer than a few words.
  4. Tooltips are in most browsers rendered with a very tiny font-size that doesn't scale if text sizing, text zoom or page zoom is used.
  5. When webpages are printed the tooltips are normally not included.

It is not wrong to use the title attribute to make the destination of a link clearer. But the title attribute is not helping many of the users that need additional information most and it has shortcomings for all users. [3]

2. Why footnotes are so much better

Footnotes just work all the way:

  1. Footnotes are accessible both with the mouse and the keyboard.
  2. Footnotes are easy to spot in the text and always visible.
  3. The additional information is located systematically at the end of the page.
  4. Footnotes scale when text sizing, text zoom and page zoom are used.
  5. Footnotes are included when the webpage is printed.

3. Well-documented linking

One of the most important uses of footnotes is for well-documented linking. It is a scandal that so many webpages are documented by almost meaningless link texts and URLs only. We must most often follow a link to find out even the title, author and date of a resource.

It is not easy to get a fast overview with such sloppy documentation, and it does not work if the link is one day broken. If that happens we have no way of finding out what was actually linked to. This information is also most often lost if the webpage is printed.

In footnotes on the other hand it is easy to include title, author and date of the resource not just the URL. We have a good chance of finding the resource even the day the link is broken. We can make a web search for title, author and date.

Well-documented linking does not necessarily require footnotes but it is often too clumsy to get room for all the nice information in the proper text, and the title attribute is simply not up to the job in any usable or accessible way. [4]

4. A footnote is a footnote

In print all sorts of concepts are used for footnotes and endnotes. Many languages only have one term: footnotes. They can be placed at the end of the page, at the end of the chapter or at the end of a book in a "chapter" or "appendix" of its own. In table cells we can even have footnote like references to notes right below the table.

All the above can also be used in webpages except for the fact that a web document is most often just one long page. I recommend to drop the endnote term and only to use the footnote term for footnotes in webpages. Even in English the term "footnote" is the more generic and well-known term.

In webpages square brackets are almost standard for footnotes: "[3]". But no brackets and letters instead of numbers will also do depending on circumstances. Links back and forth are nice but it is only an option even for footnotes in longer pages. Links would be "overkill" or to add unnecessary complexity to short pages.

5. Sidebars made with JavaScript

With JavaScript we could make all sorts of "interesting" footnote systems that would be more or less accessible. When we hover over the reference link or click it, the reference link could be replaced by the note, or the note could pop up in a sidebar.

Web designers are welcome to experiment with such systems. "Sidebars" or pop up notes here and there could even be nice at some websites for children or at some "designer" website. But it is difficult to imagine that they could become as generic, accessible, usable and robust as good old footnotes.

6. How to make footnotes right

How to markup footnotes with XHTML and CSS is documented in my source code if you need inspiration [5]. These few hints should be enough for a start:

  1. Square brackets make footnotes distinct.
  2. Superscript could be used to elevate the index number.
  3. A smaller font-size could be used.
  4. The footnote links don't need to be underlined.
  5. The links should not change color when visited.
  6. Avoid duplicate link texts by only including the brackets in the footnote reference. [6]

6.1 Footnote reference

We can use superscript using the sup element:

<sup class="footnote"><a id="footnote-3-referrer" href="#footnote-3" title="footnote 3">[3]</a></sup>

Or we can use the anchor element only and make superscript with CSS:

<a id="footnote-3-referrer" href="#footnote-3" title="footnote 3" class="footnote">[3]</a>

Including the brackets in the link text only in the footnote reference is not just to prevent duplicate link texts. If a small font-size is used, the inclusion of the brackets make the links easier to spot and recognize as links and easier to hit with the mouse for users with a less steady hand.

Please note that the XHTML code examples above and below and the corresponding CSS examples are not necessarily complete. I only put focus to some of the important aspects concerning footnotes.

6.2 Footnote section

<h2>Footnotes<h2>
<dl>
<!-- etc -->
  <dt>[<a id="footnote-3" href="#footnote-3-referrer" title="footnote 3 referrer">3</a>]<dt>
  <dd>Content of footnote.</dd>
</dl>

I use a "definition list" (the dl, dt and dd elements) for the footnote section. Definition list are not that common and mostly used for dictionaries and definitions. It is the perfect choice also for a footnote section. [7]

6.3 Superscript is nice

Using superscript to elevate the index number of the footnote is only an option. Footnotes are footnotes also without superscript. For footnotes superscript is mostly presentation not "structure".

The sup element should be used when something is meaningless without it. Mathematical and chemical notation is examples. But footnotes are a border case. If a footnote reference is placed right after a word without a space it might be easier for a screen reader to tell footnote and word apart if the sup element is used.

6.4 A small font-size is ok

I use font-size 70% made with CSS for the footnote reference. But this is a matter of taste only if superscript is not used. Footnotes should not draw to much attention to them. It is not a big problem if they are overlooked in the first run.

In print it is almost standard that both the footnote reference and the footnote section use a smaller font-size than normal. In webpages the initial font-size tends to be too small making it difficult to make footnotes even smaller.

If a relatively big font-size is used for "normal", like "font-size:100%", as I recommend to accommodate half the population: low-sighted users and users with other types of reading disabilities and elderly users, the footnote section can use "font-size:90%".

The footnote reference can be made even smaller, 70% in my case, because there is not much to read except the index number. If you use a font-size less than 100% for normal text, you must test if superscript and a smaller font-size is readable and that no unwanted space is added to the line above.

6.5 No color change for visited footnote

I only make links change color when visited as an exception to the rule. The benefits of a color change are probably big enough in sitemaps and in longer lists of links but are too dubious in many other cases, like in main navigation, menu systems, and for links targeting another location in the same page.

In Internet Explorer all links to the same page or to targets in the same page are considered visited if just one of them has been followed. All footnotes would soon be shown as visited. The color for visited link most often looks less nice than the standard link color. Avoid noise in the form of distracting details of no or little value.

6.6 Avoid duplicate link texts

I recommend including the square brackets in the link text in the footnote reference to avoid duplicate link texts. But the inclusion also serves another purpose. If a relatively small font-size is used for the footnote reference the inclusion makes it easier to recognize that it is a link and to hit it with the mouse.

If you don't want to include the square brackets in the link text of the footnote reference, I wouldn't consider it a big issue. In the case of footnotes it is somehow logical with duplicate link texts. Use the title attribute, and use meaningful IDs in order to make the URL's easier to understand for humans. [8]

6.7 Several references to one note

Several footnote references to one note is not that common and is not easy to solve technically. If we need several footnote references to footnote 3, the best solution I can think of is to let the additional link references link to their own notes saying: "See footnote 3". Such hard coded references must be updated manually.

6.8 Where to put the footnote

In print there is not much consensus about where exactly to place a footnote reference. It differs from book to book and from country to country. Here is my proposal for the web based on what the footnote relates to: word, expression, sentence or paragraph:

If in doubt and in border cases just do what you like. The above guidelines are made to make it easier to use footnotes. The more logical and consistent we are the less unwanted attention will the footnotes draw.

6.9 Styling footnotes with CSS

Using superscript in webpages is tricky. We must test our solution to see if the superscript has changed the line spacing. A lot of stuff goes into the equation. Below we will only consider the relative font-size of the footnote reference and the method used to make the superscript but the actual font used is also important.

If we use the sup element or just CSS to style the anchor element, and if we use font-size 100% of browser default for the text containing the footnote reference, I have found that 70% is a good compromise for the footnote reference.

In print we would have liked an even smaller font-size for the footnote reference, let us say 65%. It is tempting to go that low also in webpages, but small font-sizes has a tendency to get too small for many users and it must also be possible to click the link without a steady hand.

If the sup element is used, the CSS could look like this:

sup.footnote{font-size:70%; vertical-align:top}  

If only the anchor element is used (my solution), the CSS could look like this:

a.footnote{font-size:70%; vertical-align:top}  

The vertical-align property takes several values like "super", "top", "text-top" and "%" (see CSS2 Specification). The "super" value is the one we are supposed to use for superscript but it creates extra spacing in my case. But "top" and "text-top" works well in IE6, IE7, Firefox and Opera.

7. Footnotes can be generated

My articles are written in MS Word and saved with footnotes (endnotes) and all in wordprocessingML as my basic XML data store. I have made an XSLT stylesheets to transform my wordML to an intermediate XHTML data store.

In the XHTML document the footnote section and links "back and forth" are not yet generated. The footnotes are dispersed all over the document where they belong. I use XHTML markup very similar to the DocBook markup language. My XHTML for footnotes in the XHTML data store looks like this: [9]

<span class="footnote"><span class="p">content of the footnote</span></span>

I use a second XSLT stylesheet to transform the XHTML data store to more advanced XHTML for display as webpages. The second transformation generates the numbering of the footnotes, the links, the footnote section at the end of the document, et cetera.

When I need to correct a word or add a paragraph or a footnote, I load my wordML document into MS Word. When I save the document the transformations take place again and the webpage is updated. The same way of working could have been done with the OpenDocument XML format and a word processor supporting it.

Footnotes

[1]

Since HTML 4, 1998, the title attribute has been allowed in many elements like div, span, p, a, img, headings, et cetera. The most important use is to make the destination of links (a, the anchor element) more clear.

[2]

Even users of screen readers and screen magnifiers have trouble using the title attribute in the real world. Most screen readers have not even changed their default settings to make it possible to detect the use of title attributes in links. See Steve Faulkner, The Trouble with the Title attribute, 2005

[3]

Using Link Titles to Help Users Predict Where They Are Going, Jakob Nielsen, 1998, http://www.useit.com/alertbox/980111.html, is the classical article explaining the benefits of the title attribute. Jakob has not one word about the shortcomings.

[4]

Tooltips provided with the title attribute could have been useful in many cases and even more natural than footnotes in some cases if implemented in a more usable and accessible way by the browsers.

[5]

Footnotes (or endnotes) on Web pages, Jukka Korpela, 2003, http://www.cs.tut.fi/~jkorpela/www/fn.html, is the classical article about footnotes in webpages. It is dated, mostly technical, but still worth reading.

[6]

We should avoid duplicate link text pointing to different destinations. Some users like blind people benefit from lists of links generated by browsers and other user agents. Duplicate link texts do not make their navigation easier.

[7]

Take a look at Wikipedia's implementation of footnotes and compare it to my solution. See my comment on the use of footnotes in Wikipedia at the W3C WAI-IG mailing list, 2006, http://lists.w3.org/Archives/Public/w3c-wai-ig/2006JulSep/0158.html.

[8]

To make the links as easy to understand as possible I don't use "fn1" and "fr1" for IDs and in the URLs but "footnote-1" and "footnote-1-referrer". I also say "footnote 1" and "footnote 1 referrer" in the title attributes of the links. The title attribute only works as an additional help for the few, don't rely on it.

[9]

I use span elements because footnotes are always inline by nature not block level. If we want the footnote "after" a paragraph it is technically located between the last punctuation of the paragraph and the end tag of the "p" element.

Updated 2013-05-03

Translated to Serbo-Croatian by Anja Skrba, Prednosti fusnota na web stranicama, 2013