Automatic relational navigation

I really like the idea of relational notation for links, used correctly this could be is a powerful tool for creating user friendly and more accessible web sites. On this site I've mostly been using them to indicate external links (and optionally opening them in new windows), as such it was an area of this site with obvious room for improvement.

Opera, Mozilla, iCab and Lynx all natively support this feature, while Firefox users can get this functionality via an extension. Every browser presents it with their own twist, but nevertheless a great addition when it comes to accessibility and usability in all browsers. Most browsers supporting this feature also add shortcut keys for the rel linked elements.

Enabling these links introduces no revolutionary markup, simply including a <link> tag within either the head or body of the document will do the trick. (Seems though as the first is the most commonly used technique.) It's also worth noting that some browsers utilize the title attribute to add (your) custom title to the menu item.

The following example shows a document with the home link element defined...

<link rel="home" href="default.asp">

I haven't been able to find any official listing, but the following seem to be the commonly accepted values: "home", "index", "contents", "search", "glossary", "help", "first", "next", "prev", "last", "up", "copyright" and "author".

The missing link

What I'd really like though is to just add and additional relation attribute to my links as I'm creating them, and still have the browser add these elements to the navigation menus. To me this seems to be a more sensible solution, with less markup and thus less sources of errors. Since browsers doesn't support this and I don't see that changing anytime soon, lets find a way around it.

First we'll have to add the rel attribute to the links we'd like to show in the navigational menus. This is easily done; you should end up with <a> elements like this.

<a rel="relation" href="uri" title="text">text</a>

Then comes the tricky part, luckily for you I've already done it. I ended up with a script that searches through the body of a document for <a> elements containing a rel attribute, if the attribute value matches one of the pre-defined values it adds a <link> element to the head of the document. If present in the original <a> element, title attributes will also be included. The script ended up looking like this.

// Window onload event
window.onload = function() {
// Create rel links for buildt-in (browser) navigational menus
function eRelNavigation() {
 var ArrRelations,iCnt0,iCnt1,ArrAnchors,objTag,objHead;
 ArrRelations = new Array("home","index","search","next","prev");
 ArrAnchors = document.getElementsByTagName("a");
 for (iCnt0=0; iCnt0<ArrAnchors.length; iCnt0++) {
  for (iCnt1=0; iCnt1<ArrRelations.length; ++iCnt1) {
   if (ArrAnchors[iCnt0].getAttribute("href") && ArrAnchors[iCnt0].getAttribute("rel") == ArrRelations[iCnt1]) {
    objTag = document.createElement('link');
    objTag.setAttribute("rel", ArrAnchors[iCnt0].getAttribute("rel"), 0);
    objTag.setAttribute("href", ArrAnchors[iCnt0].getAttribute("href"), 0);
    objHead = document.getElementsByTagName('head').item(0);

The script will search for any links with rel values of "home", "index", "search", "next" and "prev". You can easily expand this with the others mentioned above. To keep processing time down, I suggest only adding those you plan on using (and optionally adding others when needed).

I've prepared a document that demonstrates the above. To make stealing it easy, I've included all the necessary code inline. This work is licensed under a Creative Commons License. As always, comments and corrections are very much welcomed!

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.063 seconds...

Errors occurred while generating this page... (More info availible)