How to Create Footnotes in HTML

I first encountered footnotes at Daring Fireball,¹ and have since seen them on Shawn Blanc's site, and a few others. At first it was a novelty I would never need. Then I started really writing.

As a writer, footnotes come in very handy at times. However, as one who is only beginning to learn how the HTML language works it took extensive time, several search engine queries, and a handful of sites to figure out how to make footnotes work. This is meant to enable others to use footnotes in Blogger, Wordpress, or any other blogging system that accepts HTML.

Since there is no way to create footnotes in Blogger's (and most other platforms) "Compose" or "WYSIWIG" editor, the only way to do it is by writing out the HTML code.

The HTML Footnote Code

Many will not care to read how it works, so here is the code I use for footnotes on my site:

Some text with a footnote.<sup><a href="#fn1" id="ref1">1</a></sup>

Some more text with a footnote.<sup><a href="#fn2" id="ref2">2</a></sup>

Some more text with a footnote.<sup><a href="#fn3" id="ref3">3</a></sup>

Some more text with a footnote.<sup><a href="#fn4" id="ref4">4</a></sup>

<hr></hr>

<sup id="fn1">1. [Text of footnote 1]<a href="#ref1" title="Jump back to footnote 1 in the text.">↩</a></sup>

<sup id="fn1">2. [Text of footnote 2]<a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a></sup>

<sup id="fn1">3. [Text of footnote 3]<a href="#ref3" title="Jump back to footnote 3 in the text.">↩</a></sup>

<sup id="fn1">4. [Text of footnote 4]<a href="#ref4" title="Jump back to footnote 4 in the text.">↩</a></sup>

Looks like this in your browser:

Some text with a footnote.¹

Some more text with a footnote.²

Some more text with a footnote.³

Some more text with a footnote.⁴

---

<sup>1. [Text of footnote 1]↩
2. [Text of footnote 2]↩
3. [Text of footnote 3]↩
4. [Text of footnote 4]↩</sup>


You can bookmark this page, and copy directly from the code above, or copy it and save it in a text file for future reference.

Caution:You can not use this with Blogger's WISYWIG (Compose) editor. You have to use HTML editor. If the editor is switched to WISYWIG (Compose), it will replace the some of the code, and disable the functionality. I am not sure how other editors will handle it.

If you have switched your editor to the "Compose" tab in Blogger, go to the HTML editor and delete the URL that replaced the <a href="#ref4"> or <a href="#fn1">.

How HTML Footnotes Work

For a proper footnote, the number (or letter) should be in superscript. For it to scroll to the bottom, where the note is, it needs to be a link. The note at the bottom should also have a link back to the noted text in the body of the work. Here are the tags used, and their purpose (Remember to close the tags by using "/" in the same tag you open with.):

• <sup> makes text in superscript.
• <a href="fn1"> creates a link to wherever you put id="fn1".
  
• <a href="#ref1">↩</a> makes a link back to the reference number, in this case, the first footnote. Wherever id="ref1" is, this will create a link to it.


• title="Jump back to footnote 4 in the text." creates a tip that says the text in the quotes when the user's mouse hovers over the link.


• <hr></hr> simply creates the line, or horizontal rule, which separates the body of the post from the footnotes.


• The character ↩ is created by writing the text "& # 8 6 1 7 ;" without the spaces.

My hope is that this is helpful to those looking for a way to make footnotes in HTML. If you try this with success please let me know. If you have problems, I will do my best to help if I can. However, since I am pretty new to this I can not promise I will be able to.

---

^{1. Here is John Gruber's post About the Footnotes. Besides, what would a post about creating footnotes in HTML be without actually having at least one footnote to demonstrate?↩}