Using Footnotes in Blog Posts

Blogging is quite a conversational medium, and that can often lead to distractions halfway through a particular train of thought.

Sometimes brackets or dashes are enough to set these thoughts aside - like this, for instance - from the rest of your sentence, without breaking the flow too much.

But when you're into the swing of things and suddenly realise there's something that needs clarifying, you might not want to restructure your entire sentence to try and fit the explanation into the middle.

This is when footnotes are useful; there's nothing wrong with using them, and unlike some online-only techniques, they're a recognised literary technique that shouldn't put off your readers.

But how do you use them in a long blog post, when your reader may need to scroll several screens' worth of text before they reach the end of your article?

Well, there are several options.

Linked Footnotes

If you use asterisks or superscript numbers - or any other symbol, for that matter - then it's easy to hyperlink them to your footnote, to save manual scrolling.

Use a plain-text asterisk (*) or use <sup>1</sup> (1) to indicate that there is a footnote coming, as you ordinarily would.

But rather than leaving it as plain text, hyperlink it using something like the following notation:

<a href="#footnote1">*</a>

This should look like this: *

(Try clicking that asterisk, and you should hopefully see what it does.)

It's a hyperlink, but significantly, the hash symbol in the target URL is an indication that the destination of the link is not another web page, but a specific location on the current web page.

To define that location, you simply need to add the following notation down at the bottom of your page, where your footnote is:

<a name="footnote1"></a>

Here, you don't need the hash symbol, and it's important to remember to use 'name' rather than 'href'.

You don't need any anchor text (the linked text that usually appears between the opening 'a' tag and the closing '/a' tag) as all you're doing is defining a single point, to be used as a hyperlink destination from elsewhere on the page.

If you can do hyperlinks, you can definitely link your footnotes in this way - and there are myriad other applications for on-page anchors too, from tables of contents at the top of particularly long blog posts, to 'return to top' links when you think your readers might want to quickly get back to the beginning of the page.

Section Footnotes

Even easier is simply to break up your blog post with subheadings, roughly every time you reach the bottom of one screen's worth of text.

Obviously different screens have different resolutions, so there's no such thing as 'one screen' of text, but subheadings at sensible spacing aids readability, and allows you to put footnotes at the end of each section, rather than at the bottom of a long page of text2.

If you're worried about making sure your footnotes stand out as being not-quite part of the section text itself, indent them slightly or make the font size slightly smaller - or make them italic. It's up to you, as long as they stand out slightly.

2Like this. Easier to get to, and easier to return from, even without being hyperlinked.

Pop-up Footnotes

For genuine asides that only contain non-essential information, pop-ups (like the 'tooltips' you get in many computer programs) are a sneaky way of rewarding curious readers who happen to point at the right parts of their screen.

This time, use the notation as follows:

<sup><a title="Footnote text here.">3</a></sup>

This should look like this3.

Couple of warnings with this method:

  1. You can't use speech marks in your footnote, for what I hope are obvious reasons (the second quote mark, wherever it appears, will be interpreted by the browser as the 'end' of the footnote text).
  2. For the same reason, single quotes (AKA apostrophes) might also be ruled out - it depends on whether your blogging platform interprets them as quote marks or not in HTML code.
  3. These sorts of footnotes will only work if your reader can hover their cursor over them - an action that most mobile devices don't have a mechanism to detect.

Taking that into account, and provided you're only adding footnotes 'for fun', and it doesn't matter if some people aren't able to read what they say, this is a perfectly reasonable method - and I've used it on occasion myself, when I've been willing to deal with its limitations.

Right Method, Right Time

There are several ways to include footnotes in a web page, and it's always good to make use of the '4D' nature of the web by hyperlinking, rather than requiring your page to be read in a purely linear fashion - after all, that's what footnotes have been all about since their inception.

Careful and correct use of linked hyperlinks can make your blog posts appear more sophisticated, and ensure an even greater proportion of your readers get a glimpse at your sparkling wit.

Oh, and that hyperlinked footnote I mentioned in the first section of this post? Here it comes...

*Did it work? I hope so... you can also add an anchor back up where your asterisk was, so people can simply click to return there.