Using Bookmarks with Blogger

A quick lesson on how to create bookmarks in your blog, and how to use them. In this context, a bookmark is a place in your text that you would like to reference by a hyperlink (i.e. a URL) from either elsewhere in your blog, or from some entirely separate Web page.

If, like me, you prepare your blog-posts using Microsoft Word (see Using Microsoft Word with Blogger) then you’ll already be aware of bookmarks. In Word’s ‘Insert’ toolbar there’s a ‘Bookmark’ option to attach a named bookmark at the current location or on the currently highlighted text. Once defined, then you can create links to the bookmark by using the ‘Cross-reference’ option on the same toolbar. Within a Word document, control-clicking the links will take you to that bookmark.

You’d probably expect that this would transfer neatly when copying a post from Word to Blogger, and it almost does but not quite. The internal mechanism is very similar to that used for footnotes and endnotes, and anyone who read Using Footnotes with Blogger will know that Blogger has a fault in this area, and some small edit is required in order to correct it, which we’ll come to in a moment.

An example bookmark may be found at The Wrong Surname – bookmark, and an example link to it at The Wrong Surname – link. The HTML generated by Word — which is what I used to create that blog-post — uses the following <a> elements to achieve this:

In Heighington, Lincolnshire (see <a href="#GeoNote" name="_GeoNote">Geographical Note</a> below).

… etc …

<a href="#_GeoNote" name="GeoNote">Geographical Note</a>

The second part is the bookmark, named GeoNote. The first part is the reference containing the link to the bookmark. The ‘#’ character in the href attribute is important in order to make the bookmark name into a valid link, and I’ll explain this in a moment too. You may have noticed that I’ve made these two parts mutually referential, meaning that the link is also bookmarked; named  _GeoNote. This wasn’t really necessary but it allows me to point separately to that bookmark and its bookmark reference for the purposes of this post.

It’s important to remember, here, that although this HTML was generated by Word, it could have been generated by-hand. It is not necessary to use Word in order to utilise bookmarks in your blog.

Now we come to the glitch: if this HTML was pasted into the Blogger Compose window, when creating your blog-post, then it wouldn’t like the #GeoNote or the #_GeoNote links. These hash parts are technically called Fragment Identifiers and would normally be found on the end of a URL, such as the http://parallax-viewpoint.blogspot.com/2014/04/the-wrong-surname.html#GeoNote used in the above example. Blogger erroneously wants to fill-out a full URL. However, since it doesn’t yet know where your blog-post is going to be published, it substitutes the URL of the current Compose window instead — which is totally useless as it won’t work when you leave the Compose window. Hence, although I had originally specified:

<a href=”#_GeoNote">

Blogger quietly changed this to:

<a href="https://www.blogger.com/blogger.g?blogID=3869192014258511310#_GeoNote">

The part highlighted in red is superfluous and I manually edited that out, in the HTML edit window, before publishing that post; the numeric part being different for each Blogger author. The same problem would have arisen if I’d added the <a> element by-hand and then accidentally switched from the HTML window back to the Compose window. In effect, if you’re using bookmarks (or footnotes/endnotes), and you’ve made this type of edit in the HTML window, then you should not return to the Compose window, otherwise Blogger will re-make the same error.

If your blog-post all fits within one screenful then it is unlikely that you’ll want to have the bookmark and the referencing links in the same page. However, now that you know that the #name is just part of a normal URL then you will appreciate that the referencing links could be in a different blog-post, or in entirely separate Web pages. Another example may be found at Harsh Times – Henry Pearson. This link uses the URL http://parallax-viewpoint.blogspot.com/2014/11/harsh-times.html#HenryPearson to connect to a table part-way through the associated blog-post. That URL would be valid in all circumstances where URLs are used, including links within email messages.

I’ve actually just emailed this same link to someone and that prompted me to give this explanation and help to others who might want to do something similar. As a final and more complex example, check out Rock Family Trees which uses many bookmarks and links in order to simulate a software user-interface.

Note added 5 Dec 2016: Microsoft Word has two different mechanisms for hyperlinking its Bookmark references, but one does not get saved to the “Web Page, Filtered” format recommended in Using Microsoft Word with Blogger. That format filters out the excessively verbose and complicated HTML that Word generates by default, and is necessary for the correct operation of feedburner. A more in-depth description of the issue, and an easy workaround, can be found in the later post QIL: A Normative Scheme for Labelled Narrative, under “Word Hyperlinks” and “Blog Hyperlinks”.