Footnotes (or endnotes)

Why make footnotes?¹

The nature of hypertext² should absolve authors of the need to make footnotes, shouldn't it?. After all, the ability to link from one document to another is a key attribute of the web. But this presupposes that the footnote refers to another document and not a simple note of clarification or other reference. Where the reference is to a document there is no guarantee that it is available online—it could be a printed work such as a book or journal, or perhaps a radio programme or lecture notes.

Footnotes in web pages serve the same purposes as they do in printed works: to refer to matter without interrupting the flow of the text; to satisfy the curious reader regarding the source of a quotation; to back up an argument by reference to other works; to clarify or add depth to a point; to allow the author to add commentary in a more personal tone.

Therefore we need a method by which we can add footnotes to our web pages in a uniform and logical manner.

The excellent Jukka Korpela has condensed and expanded upon some earlier discussion on this subject in his Footnotes (or endnotes) on Web pages and it is his work which I draw on for these recommendations as well as my own thoughts.

What do we want to do?

Our task is to provide a means to refer to some other material³ which is outside the main body of the text but which is nevertheless pertinent, and about which our reader may be pleased to be informed.

The reference cue should: indicate the presence of a footnote, identify it, and allow the reader to go directly to it; and the footnote itself should allow the reader to follow back to the cue in the text.

Because we're writing web pages which use good practice in doing so, we use the tools in HTML rather than javascript or some other more complex method⁴. We use HTML because it does the job reasonably well without excluding users who may not have the latest greatest software gizmo.

How to make footnotes

This is where we need to concentrate. It's not difficult but it is crucial to get it right. It will probably be good to have a printed reference handy when creating footnotes, which we'll come to shortly.

This discussion makes no assumption about the workflow practice when creating the original text of a document containing footnotes. There exists no ready-made method of automating the conversion of footnotes in a word-processor document to footnotes in a format suitable for a web page⁵.

There are two parts to the footnote reference :

The reference cue

The reference cue will almost invariably be a number (integer, figure). It may be any character or string of characters but we confine our examples here to the use of numbers as this seems the most logical and sensible scheme to adopt.

Each footnote reference cue must be unique. If two references need to be made to the same source then the footnote should be repeated, abbreviated in the conventional manner by use of Ibid. or Op. Cit. if this is felt to be necessary.

The footnote

The footnote comprises the footnote text prefixed by its reference number (or mark). There's not much to say about the footnote text itself as this will be marked up in whatever style the author usually uses. The footnote reference mark should of course correspond with the cue within the referencing text (like, duh!)

The code we will use to create each of these includes several tags and attributes which interact in a subtle but powerful way.

We will use the example of footnote 1 on this page to demonstrate the code.

The reference cue and footnote are dealt with separately, but because they interact the instructions allow the reader to jump between each part.

The reference cue

We start with a heading:

to which we add a reference cue:

We want the cue to display as superscript, so we use the appropriate tag:

and because we might need to use <sup></sup> for purposes other than footnotes (such as mathematics: E=MC²) we label the tag with a class attribute:

(make sure that there are no spaces between the end of the text and the opening <sup> tag. Leaving a space will let the browser break the footnote cue over to the next line, which we don't want it to do).

Now we create an anchor href to link to our footnote (observe that it is nestled snugly within the <sup></sup> tag):

Note the octothorp (#) which is essential when creating anchors which refer to a target within a document.

The value of the href ("fn001") must be the same as the id and name given to the footnote itself.

At this point the reader might like to review the instructions for creating the footnote's target anchor.

We want to allow readers to follow back to the reference cue from the footnote, so our reference anchor needs a name and an id to act as hooks:

The values for name and id must be different from those attached to the footnote itself, but must also clearly identify the particular reference cue. Our solution here is to simply add "ref" (for "reference") to the footnote name/id to give fn001ref.

And finally, so that we can identify all tags doing this particular job (so that we can separate them out for various purposes if we need to) we give all our reference anchors the same class attribute:

The attentive reader will have spotted the cunning derivation of the class attribute's value from fn (footnote) and ref (reference).

The footnote

We start with a paragraph containing the text of the footnote, preceded by a reference which matches the cue in the text:

Next we add the target anchor to which the reference cue will point:

The footnote name and id (in this case "fn001") must be the same and cannot start with a number. We use three digits here to allow for a lot of footnotes. We could simply write fn1 and this would work just fine, but when we anticipate a document will have hundreds of footnotes it makes for neater and more easily editable code if these tags are of a uniform structure.⁶

We use both name and id attributes because this belt-and-braces approach caters for more older browsers. (Also, see the notes about name and id attributes for important details.)

Completion to this point means we can link down to the footnote from the cue in the text, but we also want to link back up to the reference cue so we add an href:

And finally, so that we can round-up all footnotes together and treat 'em mean, we add an identical class attribute to each footnote's tag:

The order of the attributes within the tag does not matter to the browser interpreting the code, but it does add some small complication when tags are batch-processed, so it's best to stick to a particular order if practical.

That's it for the technique for creating footnotes in the main flow of the text.

Footnotes in boxes and sections

As well as footnotes added to the main text, our articles sometimes include sections and boxes, each with their own little collection of footnotes. How do we handle these?

When we create headings and subheadings within our document we give them anchors which identify each item within the hierarchy of the page. This is primarily so that we can create contents lists for our pages, but it can also help us when footnotes need to apply to a section or box and not be confused with those which apply to the whole document.

What we do is to create the footnote links exactly as above, but we prefix each with the index for the section which contains it. We prefix rather than suffix because this makes sure the hierarchy remains intuitive. The other way round would work just as well as far as the browser is concerned, but we want us humans to be happy too.

Let's say our article contains boxes which have footnotes at the bottom of each box. Footnote 1 in the box is a different reference to footnote 1 in the main text. The footnote cue within the box should be something like:

And the footnote itself would be coded like this:

All that remains is to wrap the box's footnotes in a <div></div> to tell the browser that these are all the footnotes for that section:

Validate: XHTML CSS

This page was last updated when I had time.

All material in this web site which was originally created by me is © Philip King 2003 and licensed under a Creative Commons License.

These pages hosted by GreenNet.