HTML footnotes

(Main text last modified 28 April, 2003. Meta-notes and formatting last modified 9 July, 2023.)

This page demonstrates one way to implement footnotes1The footnote is named for Sir James Footnote, who cited a source for his every utterance. in HTML.

To view a footnote on this page, move the pointer over a footnote number.

Uses of the footnote

Many scholarly works2(and, obviously, some not-so-scholarly ones) include footnotes. A footnote can be used for any of six major purposes:

  • To digress.3Which reminds me of a Tom Lehrer recording. But I digress.
  • To obfuscate.4Generally through the use of cryptic abbreviations: viz., ibid, op cit., passim, et al., q.v.
  • To confuse the reader.5After all—as the poet has so aptly noted—“Whither the lovely glockenspiel in flight? / Whither the brackish ptarmigan by night?”
  • To be pedantic.6“It’s hard to be a pedant in a world that’s wrong Wrong WRONG!” —Zed Lopez
  • To cite references that7(if you’re lucky) nobody will ever look up.8Pedant, Irene Melissa Anne, “A study about whether readers ever look up citations,” Journal of Footnote Research 18:53-112.
  • To show off the author's erudition.9"Erudite—wasn’t she the Greek goddess of wisdom?” —Jennifer Skurnick

Obtaining footnote text

Before creating a footnote, one must first obtain a reference or a parenthetical aside. References may be obtained by consulting any library;10or by requesting them from a job candidate be sure to choose a book or article with an impressive-sounding title. Parenthetical asides are also easy to come by: merely think of something irrelevant to the topic at hand, and write it down.11Failing that, references and parenthetical asides are available on reasonable terms from the present author. Inquire within.

Stalking the wild footnote

Footnotes are easily startled.12Boo!

If you encounter a footnote that is foaming at the mouth or shows other signs of rabies, do not under any circumstances attempt to capture it yourself. Instead, immediately contact your local university's Comparative Literature department, which will be happy to send a trained expert to assist you.

Preparing a footnote

Footnotes are tasty straight out of the box as a low-calorie snack.13A single footnote supplies almost 85% of the USRDA of tedium.

If you prefer, you may sautée them with butter and onions, and wrap them in pita. If you must cook a footnote in the oven, be sure to stop when it's half-baked.

Care and feeding of the footnote

If you treat your footnotes well, they will breed. In general, the more footnotes a given work has,14(even gratuitous ones) the more it is likely to acquire.15Case in point. Some articles contain more text in the footnotes than in the main text.


Treat your footnotes well, and they shall wax fertile, and multiply.


The original version of this page, written in 1999, demonstrated the use of a footnote object that I created for use with Dreamweaver version 3.

In 2003, the code that I used became obsolete in various ways, so I rewrote it to use better CSS and better/later versions of the Macromedia show/hide layers code.

I revisited the page in 2023, and was surprised to find that the code still works perfectly. Nice work, Macromedia JavaScript engineers of the early 2000s! I feel like it’s not often that code still works without revision twenty years later.

But I did improve the CSS a little in 2023.

Sadly, there is still no <footnote> element in HTML.

My implementation of footnotes on this page is probably not very accessible; I haven’t yet tried it with a screen reader, but I suspect that it wouldn’t work very well.