The Joy of Relational Links

The other day I looked down at the increasingly crowded bar at the bottom of Firefox and noticed these spangly new buttons:

At first I thought Foxytunes had updated itself without telling me, but no, there was my favourite browser-based music-control system sitting to the left. This was something new. I cautiously hovered over it and a text-box popped up with the URL of the previous page in the weblog I was reading. Clicking on it took me there. Aha! That’ll be that extension I installed a week or so back and forgot all about. I wonder what it was called…

This happens quite a lot. Newly installed Firefox extensions, of which there are many, load when Firefox is restarted, but because I very rarely switch my computer off, preferring to just let it sleep, Firefox very rarely restarts and when it does I’m often greeted with some new functionality that seemed like a good idea at the time. This new toy was the unassumingly titled Link Toolbar and it remains a good idea being, as it is the, first time I’ve seen a specific piece of HTML being used to add to the user experience.

Slight digression. The default templates for Movable Type blogs come chock full of features, many of which aren’t particularly relevant but it’s nice to have them there if only so you can figure out what they’re for and decide for yourself if they’re relevant or not. When building a new set of templates I tend to strip out that which isn’t of any use to me but there was one little piece of code I left in even though I didn’t really understand what it was for. This is, I think, a “best practice” tip – if you don’t understand it, leave it in, especially if it doesn’t seem to be doing anything annoying. It might come in handy one day.

You can find this code if you check the source for one of my single-post archive pages. There at the top will be three lines that follow this pattern:

<link rel=”start” href=”http://peteashton.com/” title=”Home” />
<link rel=”prev” href=”http://peteashton.com/05/05/12/hoodies.html” title=”Hoodies” />
<link rel=”next” href=”http://peteashton.com/05/05/13/luggers_welcome.html” title=”Luggers Welcome” />

There are (at least) 15 link types and, amongst other things, they describe how the document relates to other documents, in this case quite simply that there is a page before and a page after this one and that there exists a home page from which they all come. This stuff is obvious when you’re looking at the rendered page itself but not so obvious to a computer like Google.

All the Link Toolbar does is looks for these tags and applies them, when available, to it’s buttons. Suddenly a piece of code which didn’t really make sense because it doesn’t have anything to do with the immediate user interface becomes very useful indeed, giving you a way to navigate around websites that is standardised to your browser rather than the somewhat random implementation of Previous and Next buttons that web designers use.

To my surprise this handy code seems to be fairly widespread, at least on those sites that are professionally run or use some kind of content management system with templates designed by an HTML standards fanatic, but it’s by no means everywhere. Most hand-coded sites don’t have it and to be honest anything I built from scratch wouldn’t bother with them.

So, go install the Link Toolbar – it’ll improve your browsing in a subtle yet perceptible way – and if you’re building a site with a bunch of pages that run in sequential order, be sure and use them link tags. Oh, and thanks to whoever it was who pointed me towards the toolbar in the first place. If I’d known how useful it was I’d have credited you there and then.