24 ways

to impress your friends

Boost Your Hyperlink Power by Jeremy Keith

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:

  1. <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:

  1. <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 relativity

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:

  1. <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:

  1. <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:

  1. Subscribe to <a href="index.xml">my RSS feed</a>.

You can add extra information to this anchor using the rel attribute:

  1. 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”:

  1. <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 microformat:

  1. 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 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:

  1. 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.”

, which stands for XHTML Friends Network, is a way of describing relationships between people:

  1. <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:

  1. <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 revolution

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:

  1. <a href="shoppingcart.html" rev="help">continue shopping</a>

The rev attribute declares that the current document is “help” for the linked file.

The 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:

  1. 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.

  1. I agree with <a href="http://richarddawkins.net/home" rev="vote-for">Richard Dawkins</a>
  2. 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:

  1. <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.

About the author

Jeremy Keith Jeremy Keith is an Irish web developer living in Brighton, England where he works with Clearleft. He is joint leader of the WaSP DOM Scripting Task Force and he has written a book about DOM Scripting. He likes music, food, and liquid layouts. All he wants for Christmas is universal support for max-width.

Your comments

  1. § Pelle:

    Nice and simple introduction, microformats looks like a great thing, good to have same more info about it now- thanks!

  2. § letimati:

    Hi I remember hearing a talk you gave on rel and rev and i got really interested.

    I was wondering how i could use them in the footer of websites i build to say my company built this website.

    Do you think i should use rel and rev link this

    companyname

    This is what (i think) this says,
    easy bit
    the companyname is an organization, which is inside a vcard tag so will get looked at as an organisation.

    the second thing says www.companyname.com is an external link to the document you are on and the document you are on was made by www.companyname.com as it is the rev of this document. The rev attribute is the relationship between the resource and the current page, so the relation ship is
    “this page was ‘made’ by by the resource” i.e. this page was made by www.companyname.com;

    I think this is correct but I also think i could add ‘made’ to the rel (rel=‘external made’) as well as this would say the resource was made by the resource which will be correct as we built our own website.

    I am off the mark here?

  3. § Jeremy Keith:

    That makes sense. Personally, I think I would use the term “creator” or maybe “designer” (the term “author” would apply if you also wrote the content). On a site you have created, you could link back to your own site with rel=“creator”. Then on your own site, you can link to sites you have created with rev=“creator”

  4. § Julian Bennett Holmes:

    Thanks, this is good stuff.

  5. § Steve Ivy:

    Jeremy, this is cool stuff. Inspired, I did some testing at:

    http://redmonk.net/archives/2006/12/18/testing-votelinks/

    I added some links with rev=“vote-for” and “vote-against”, then used Javascript to check the page for the votelinks and add tooltips to the tags. Right now I’m popping up little +1 and -1 icons, but I got into a discussion with the usability guy here about visual affordances in the links and I’m not sure if there’s a need to make the votelinks explicit on the linking side.

    Hopefully, something like trackback can be used to propogate these votes to the sites that are linked to, and in the comments/trackbacks lists the site could have an Agreed/Disagreed list. Just thinking…

  6. § Jessi:

    I’m very curious. What exactly do search engines do with these attributes? What benefit is there in using them—besides impressing one’s friends, I mean?

  7. § Thomas Swift:

    The first experience I had with a rel tag was when i used lightbox, it used rel=“lightbox”. So this was a great supplement to learning what else rel and rev can be used for in relation to microformats. Thanks!

  8. § Margarida:

    I really liked this information, great article Jeremy :) going to use this more on the links, instead of using only for the link elements :D

  9. § Steven McCullagh:

    Rel: Describes the link.
    Rev: Descibes the page you are currently authoring (and it’s relevance to the link).
    This is to assist with the Berners-Lee Semantic Web mantra.
    Probably will be used by Google, Yahoo and WikiSearch then. When will we see a microformats search option from these search engines where we can search all their indexed microformat-enabled websites?

  10. § Vlad:

    Good point. Could be usefull as a DOM “flag” for scripting: if(document.getElementsByTagName(a)[2].getAttribute(“rel”) == “foo”)...
    And in CSS: a[rev=“olution”] or a[rel~=“ationship”], etc…

    Thanks!

    BTW, I vote for Dawkins…

  11. § Harry:

    If I use a rel=tag within a hyperlink on a web page, will it apply the tag(s) to all the major blog engines (technorati, blogger, delicious etc) that were pinged? Which ones do recognize the rel (tag or directory) code? Your comments from successful experience very welcome.

Commenting is closed for this article.

24 ways: day 18