Boost Your Hyperlink Power
This article first appeared in 24 Ways, the online advent calendar for geeks.
There are HTML elements and attributes that we use every day. Headings, paragraphs, lists and images are the mainstay of every Web developer’s toolbox. Perhaps the most common tool of all is the anchor. The humble a
element is what joins documents together to create the gloriously chaotic collection we call the World Wide Web.
Anatomy of an Anchor
The power of the anchor element lies in the href
attribute, short for hypertext reference. This creates a one-way link to another resource, usually another page on the Web:
<a href="http://allinthehead.com/">
The href
attribute sits in the opening a
tag and some descriptive text sits between the opening and closing tags:
<a href="http://allinthehead.com/">Drew McLellan</a>
“Whoop-dee-freakin’-doo,” I hear you say, “this is pretty basic stuff” – and you’re quite right. But there’s more to the anchor element than just the href
attribute.
The Theory of rel
ativity
You might be familiar with the rel
attribute from the link
element. I bet you’ve got something like this in the head
of your documents:
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
The rel
attribute describes the relationship between the linked document and the current document. In this case, the value of rel
is “stylesheet”. This means that the linked document is the stylesheet for the current document: that’s its relationship.
Here’s another common use of rel
:
<link rel="alternate" type="application/rss+xml" title="my RSS feed" href="index.xml" />
This describes the relationship of the linked file – an RSS feed – as “alternate”: an alternate view of the current document.
Both of those examples use the link
element but you are free to use the rel
attribute in regular hyperlinks. Suppose you’re linking to your RSS feed in the body
of your page:
Subscribe to <a href="index.xml">my RSS feed</a>.
You can add extra information to this anchor using the rel
attribute:
Subscribe to <a href="index.xml" rel="alternate" type="application/rss+xml">my RSS feed</a>.
There’s no prescribed list of values for the rel
attribute so you can use whatever you decide is semantically meaningful. Let’s say you’ve got a complex e-commerce application that includes a link to a help file. You can explicitly declare the relationship of the linked file as being “help”:
<a href="help.html" rel="help">need help?</a>
Elemental Microformats
Although it’s completely up to you what values you use for the rel
attribute, some consensus is emerging in the form of microformats. Some of the simplest microformats make good use of rel
. For example, if you are linking to a license that covers the current document, use the rel-license microformat:
Licensed under a <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Creative Commons attribution license</a>
That describes the relationship of the linked document as “license.”
The rel-tag microformat goes a little further. It uses rel
to describe the final part of the URL of the linked file as a “tag” for the current document:
Learn more about <a href="http://en.wikipedia.org/wiki/Microformats" rel="tag">semantic markup</a>
This states that the current document is being tagged with the value “Microformats.”
XFN, which stands for XHTML Friends Network, is a way of describing relationships between people:
<a href="http://allinthehead.com/" rel="friend">Drew McLellan</a>
This microformat makes use of a very powerful property of the rel
attribute. Like the class
attribute, rel
can take multiple values, separated by spaces:
<a href="http://allinthehead.com/" rel="friend met colleague">Drew McLellan</a>
Here I’m describing Drew as being a friend, someone I’ve met, and a colleague (because we’re both Web monkies).
You Say You Want a rev
olution
While rel
describes the relationship of the linked resource to the current document, the rev
attribute describes the reverse relationship: it describes the relationship of the current document to the linked resource. Here’s an example of a link that might appear on help.html
:
<a href="shoppingcart.html" rev="help">continue shopping</a>
The rev
attribute declares that the current document is “help” for the linked file.
The vote-links microformat makes use of the rev
attribute to allow you to qualify your links. By using the value “vote-for” you can describe your document as being an endorsement of the linked resource:
I agree with <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>.
There’s a corresponding vote-against
value. This means that you can link to a document but explicitly state that you don’t agree with it.
I agree with <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>
about those <a href="http://www.icr.org/" rev="vote-against">creationists</a>.
Of course there’s nothing to stop you using both rel
and rev
on the same hyperlink:
<a href="http://richarddawkins.net/home" rev="vote-for" rel="muse">Richard Dawkins</a>
The Wisdom of Crowds
The simplicity of rel
and rev
belies their power. They allow you to easily add extra semantic richness to your hyperlinks. This creates a bounty that can be harvested by search engines, aggregators and browsers. Make it your New Year’s resolution to make friends with these attributes and extend the power of hypertext.