Saturday, February 19, 2011

How to Create Footnotes in HTML

I first encountered footnotes at Daring Fireball,1 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="fn2">2. [Text of footnote 2]<a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a></sup>

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

<sup id="fn4">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.1

Some more text with a footnote.2

Some more text with a footnote.3

Some more text with a footnote.4



1. [Text of footnote 1]
2. [Text of footnote 2]
3. [Text of footnote 3]
4. [Text of footnote 4]


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?

22 comments:

  1. Ooh thank you! I just might use this. I do know some html but hadnt taken the time to research this particular thing. Thanks for the tip!

    ReplyDelete
  2. Good job.

    Simple code, simple explanations. Went through a lot of technical web-pages, and finally they gave the same stuff in 500% more words.

    Thanks

    ReplyDelete
  3. I was prepared to spend $25 to have my usual HTML guru explain footnotes and linking to me via Skype.

    This method is much cleaner than the *, **, ***, etc. system I have been using.

    Thank you for this post!

    ReplyDelete
  4. Thank you all so much for the encouraging comments. So glad you are finding it useful.

    ReplyDelete
  5. Brilliant! Thank you so much for this, so helpful.

    ReplyDelete
  6. Just want to add my thanks for this. Just was digging the footnote jump-back functionality in a Daring Fireball post, and this explantation and code is now an essential reference for me. Cool.

    ReplyDelete
  7. One more shout-out thanking you for the code examples here -- extremely helpful and concise!

    ReplyDelete
  8. The code is still a mess to me, but this post is really helpful. Thank you very much! :)

    ReplyDelete
  9. I refer to this often and I appreciate your sharing this! I still hate the hassle of dealing with footnotes, but this at least makes them turn out correctly on the web.

    ReplyDelete
  10. Awesome article. Thanks, Karl! And do you know if there's something comparable to this in HTML? http://ignorethecode.net/blog/2010/04/20/footnotes/

    ReplyDelete
  11. First footnote works in Wordpress. The second doesn't.

    ReplyDelete
    Replies
    1. I believe that sup id="fn1">1 should read sup id="fn2">2 after the first one, and so on.

      Delete
  12. Thank you for your article. It is so helpful. Would you mind posting this article on my blog with translating to Korean? I will post the original link together, of course.

    ReplyDelete
  13. my footnotes are not jumping to one another. Blogger keeps linking it to my personal blog homepage. Help!

    ReplyDelete
  14. I have found the answer to my question. Apparently there is some sort of bug that messes with the link when you you switch the editor from HTML to compose. The best thing to do is complete your article as you want it completed and then add the footnote in HTML editor. But once you do this you will have to edit your post in HTML format or go back and redo the endnotes as the LAST STEP.

    ReplyDelete
  15. Three years later and we're still thanking you for this simple, practical solution. I copy-pasted it in my Wordpress blog and it worked! Then went back to learn how you did it. Thanks so much.

    ReplyDelete
  16. Thanks for sharing but I want to point out a repeated mistake in your example. You have applied in footnotes one same tag "fn1" to the other 3 (footnote 2, 3, and 4). That's why some other friends who have copied your code and found it not working properly.

    ReplyDelete
  17. This is working partially in blogger.com blogs. When I try to move to a footnote or from footnote back to the main text using the footnote links, it moves me rather to the blog's creation page. Too bad.

    ReplyDelete
    Replies
    1. I have the same problem, anybody knows a solution?

      Delete