Leonard’s comment on my post about XML and footnotes got me thinking about representing footnotes in HTML. Not the visual presentation — there are lots of options for that, using CSS, JavaScript, and internal links — but the semantic one. In other words, using nothing but semantically-meaningful HTML tags (DIV, SPAN, P, A), how should one mark up a footnote in a document?
I believe it’s a failing of HTML that it does not include a footnote tag. I’ve heard that earlier drafts did include it, but it was dropped for lack of interest. Clearly, early HTML users — math and comp. sci. types — weren’t as fond of footnotes as those in the humanities. Lawyers, for instance, are fanatical about footnotes. There are entire books on proper citation for legal documents.
So if you’re building, as I am now, a web-based database for legal documents, what do you do? An article called Scholarship on the Web: Managing & Presenting footnotes and Endnotes lists several possibilities. Basically, if you don’t want to use internal links, you can put the entire footnote inside a SPAN and use CSS and/or JavaScript to display it as a pop-up or a side note. This is great for on-screen reading, but there’s an edge case: multi-paragraph footnotes. Lawyers love footnotes so much they can go on for many paragraphs, even including block quotations.
It’s not valid XHTML to put a block-level element like P inside of a SPAN. So put the footnote in a DIV instead of a SPAN, I thought. No dice: you can’t put a DIV inside of a P. So in the end I have to put the footnote in a DIV entirely outside P that referenced it. I need some way to connect the footnote with the place in the text where it’s referenced, so at this point I might as well go back to internal links.
Perhaps I’m making this more complicated than it really is.
I have long noticed an anti-humanities bias in HTML. I can’t think of a better way to do what you want than the internal-links solution.
This is almost certainly overkill, but Docbook has built-in support for footnotes.
By now I believe that you have finished your database. But if anybody else is interested, keep reading.
For small footnotes, take a look at http://microformats.org/wiki/footnotes-examples. However, I’m against using the SUP tag because it is not meaningful and should be replace with CSS. Another possibility would be to use the title attribute, that can be included in most tags. From the HTML 4 spec:
“title: This attribute offers advisory information about the element for which it is set.”
(more info on this attribute can be found in http://www.w3schools.com/tags/att_standard_title.asp)
Most browsers show this as a tooltip when the mouse is over the element, but it can be rendered inside the page with the CSS “content” rule and attribute selectors if needed, or you can highlight the elements that have this attribute set. Internet Explorer doesn’t supports attribute selectors however.
The internal link solution has the advantage of using the built-in navigation from the browser and supporting longer, structured chunks of text while the tittle attribute only supports plain text. You can also use a custom value for the “rel” attribute like this: 1
XHTML 2 (currently in draft stage) provides the “note” and “complementary” values for the “role” attribute of elements that could be used for footnotes.
And for HTML 5 (also currently in draft stage) see http://dev.w3.org/html5/spec/Overview.html#footnotes. Basically it tells you to use title attribute for short notes, a tag with the number inside square brackets for longer notes (ex: [1]) or the new aside tag (equivalent to the XHTML 2 complementary role) for even longer notes or side notes.
And finally, you can also look for the terms html and annotation. This may yeld some interesting results.
I’d also like to point out, even though off-topic, that html has the blockquote and cite tags for including references from other authors.
Who would have guessed in 1993, when HTML was introduced, that 16 years later the language would still not have something as basic as a mechanism for marking up footnotes. Or that after the publishing of the XHTML 1.1 spec in 2001, we would go more than a decade without any updates to the language (it doesn’t look like HTML5 or XHTML 2.0 will reach completion any time soon).
Personally, I have stopped waiting and have now solved the footnotes issue with my “Nelson” HTML preprocessor (http://nelsonhtml.com/). I only wish I had taken this route years ago.