Writing Footnotes with HTML

When I decided to translate a really long GACKT interview, I was faced with the problem of how to add the notes & translation notes. The ideal solution was citations like those found on Wikipedia, e.g. numbers in the text that link directly to the footnote at the bottom of the page, and those notes can take you back up to the proper point. There are footnote plugins for WordPress, but apparently those can’t be used on a wordpress.com (not .org) powered blog, not even with the Custom Design upgrade.  Luckily, I found a blog that explained very concisely how to write HTML footnotes:

Compendiums: How to Create Footnotes in HTML

It’s so easy to understand! Mad props to the author.

I have only one thing to add: the code as written on the above site doesn’t change the color of the superscript number in your text. So if you want to do that, you’ll need to add HTML color codes, which you can easily find on various sites, such as this one.

If you don’t have much experience fooling around with the Text editor, I recommend writing a post in the Visual editor first, including different kinds of text (e.g. italics, bold, different colors & heading styles), then switching to the Text editor. Even if you’ve never looked at HTML before, doing that makes it easy to figure out the various codes for the most common effects. I hadn’t done anything with HTML in 10 years or so, but since I did that it was fairly easy to get back into the swing of it.

HTML version of Visual Draft
I wrote the draft in the Visual editor first, writing out the numbers of each citation in red. Then when I was ready to replace those words with the superscript numbers linking to the footnote, all I had to do was find all the instances of #ff0000 (HTML code for the color red) in the Text editor and insert the code for the footnote.

Besides the various examples on the Compendiums blog, you can see how I put this to use on the page with the above mentioned interview translation: The GACKT Way of Life.

2 thoughts on “Writing Footnotes with HTML

    1. Hello brett, thanks for stopping by! Sorry I just now saw your comment. It had gone to the spam folder.

      If you want to share a link to this post on Twitter, go ahead! I’m glad if the information here is useful to others.

Let's talk!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.