Navigation Using rel
The rel and rev attributes can be used on <link> and <a> to indicate relationships between documents:
<link href="/" rel="home" title="Homepage">
<a href="/" rel="home">Homepage</a>These mean the resource at href is the homepage for the current document.
Implementations
A few web browsers provide special UI for one or both forms. I’ve tried out 4 implementations.
Lynx 2.8.5
Automatically displays this navigation aid across the top of the page. All of the relationships appear as space-separated links which wrap across the top of the first page. You can jump to it from anywhere in the document by pressing the # key. Only supports <link rel>.
Opera 9.0
Go to View > Toolbars > Navigation to display it. You only get one button for each type and types which often have multiple entries are left out of the list.
Only supports <link rel>.
cmSiteNavigation for Firefox
Uses buttons like Opera for most items. Has dropdown lists for rel values often applied to several links, such as chapter and bookmark. It groups some other items into a dropdown.
Supports <link rel> and <a rel>.
Link Toolbar for Firefox (Link Toolbar for Firefox 1.5)
Uses a set of small toolbar buttons which have to be added to the toolbar using View > Toolbars > Customise. It can guess some relationships using URI structure or link text.
The most common navigation movements get individual buttons. A dropdown menu provides access to other link types, including any unrecognised values. It creates submenus when a rel value is applied to more than one link.
Supports <link rel> and <a rel>.
Standards Compliance
It seems <link rel> is more widely supported than <a rel>. Both use the link-types data type, so they have the same purpose.
Implementations should support both, like the Firefox add-ons?
Best Implementations
In my experience, here is what makes a special UI for rel useful:
- Support
<link rel>and<a rel>, like Firefox add-ons. - Support
relas a space-separated list, like Link Toolbar. - Keep primary movements in separate buttons, as they all do. Specifically:
HomeUpFirstPreviousNextLast
- Guess primary movements if
relis not set, like the Link Toolbar. - Create dropdown button for any link type used by multiple links, like Link Toolbar.
- Make unknown link types available via an Other button, like Link Toolbar.
- Group the toolbar into logical sections, like all except Lynx.
- Use the link text or
titleto label items. cmSiteNavigation has a preference for this, which seems excessive. - Toolbar must fit the look and feel of the UI, like Opera and Link Toolbar.
- Provide keyboard shortcuts to primary movements, like Opera.
- Make it keyboard accessible, like Lynx.
Link Toolbar for Firefox is the best all-rounder, imho. They all do some things well, though.
Conclusion
Implementations which support rel on <a> enable authors to indicate relationships more efficiently. The relevant markup can be 70% smaller in both text/html and XML serialisations. Pages can look exactly as they did before.