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>


<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?


  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!

  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.


  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!

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

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

  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.

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

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

  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.

  10. Awesome article. Thanks, Karl! And do you know if there's something comparable to this in HTML?

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

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

  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.

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

  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.

  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.

  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.

  17. This is working partially in 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.

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

    2. This comment has been removed by the author.

    3. Solution:
      1. Complete editing your actual blog page
      2. Publish the blog page and copy the url of the published blog page
      3. Do the footnotes as this blog says
      4. Switch from the html view to the compose view, let Blogger add urls to the html code (which are belong to the blog's creation page)
      5. Switch to the html view and change these false urls with the 'url of your published blog page'
      6. Now you can freely change between compose and html views (;

  18. Thank you very much, very very nice tip :)

  19. this has been very helpful -- and I appreciate yolcu !! that saved the day.

  20. Brilliant, thanks! And if anyone wants more than 4 footnotes you must change the number accordingly: i.e. change all "4" to "5" etc. A quick way to do this is to copy the html code into Microsoft Word, and after clicking "cntrl + F" click "replace" and in this manner you can automatically change the numbers without having to do so manually for each one.

  21. I was using this on my website builder and it worked wonderfully - until about a week ago. Is this code no longer valid?

    1. Most likely there was a change in the website builder you use. The code should still be valid, but you may have to find a workaround similar to the Blogger workaround.

      Best of luck!

  22. Thank you. That is very usefull.

    But i want to be opened a little window when we put the mouse on a footnote like wikipedia. Can i do that in blogger?

  23. That type of thing is much more complex. I'm not sure it would work on Blogger.