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.