How to Make *Real* Footnotes: a Quick HTML Primer

This is mostly a post for my friend Todd, who writes the excellent film/TV blog My Favorite Gum Commercial, where he posts great, thoughtful reviews of things like Up and Eating the Dinosaur. As a bonus, he's very responsive to arguments. I've been too lazy to pick fights with him lately, but our back and forth over the relative merits of Mr. Smith Goes to Washington and It's a Wonderful Life was pretty epic.

Regardless of our differences of opinion, I've promised to show him how to make real footnotes using HTML, so I thought I'd put it up in a post.¹ He's been waiting forever, and as he used at least *four* unlinked footnotes in his most recent post on Oscar nominations (which, by the way, is fantastic), I feel it's TIME.

I'm going to do this two ways. First, I'm going to post a template you can just cut and paste, and then second (if you're interested) I'm going to put on my librarian hat and explain the different parts of the html and how they work together. This is mostly for my own entertainment, so feel free to skip it.

For the elevated number part of the footnote you use:

<a href="#footnote 1"><sup id="footnote 1 ref">1</sup></a>

For the bottom:

<p id="footnote 1">[1] Footnote text goes here, tra la la. <a href="#footnote 1 ref">[back to text]</a></p>

To make it link back and forth, the words that go < href="# HERE > and < id="HERE > have to match. Simply change the numbers in all the names accordingly for each footnote. You don't have to use "footnote #" and "footnote # ref" as names if you don't want to, they're just what I've chosen.

Um, you know what? I am really tired of editing and re-editing this post-- blogging about HTML is seriously headache inducing, because each time you guys *see* < >, I'm actually seeing "& lt & gt" so it's *really* hard to make sure I have everything right, and if I flip over to check it in preview, all my footnotes go wonky. ² So I am done with this for now-- you really only want to cut and paste, anyways. If you want me to explain the tags involved here, let me know, and I will. But for now I'm going to assume that templates will be easier for all parties concerned.

[1] To be perfectly honest, I'm doing this for myself as well. Although I use footnotes in almost every post, I go so long between posts that I forget how to make them by the time I start a new one. And then, of course, I have to google it, and sift through the links to find the one that makes the most sense to a computer illiterate. Now I'll just be able to peek back at my own post. Easy![back to text]

[2] Which, incidentally, is a fact worth sharing. The little "#name" thing will link to your *draft* if you look at your post in the preview or compose windows while writing. You have to stick with the edit HTML option all the way through if you want them to work. I am not smart enough with computers to know *why* this happens, only that it does. So if you don't want broken footnotes, don't use preview or compose. [back to text]