Notes on the rel attribute

Anchor elements, incorrectly known as “a href” tags, are HTML instructions that let users click from one web page to another. The “rel” attribute modifies anchors, giving semantic meaning to otherwise plain links. As of this writing there are more than 60 accepted or proposed uses for the “rel” attribute for HTML4-5. Examples include:

<a rel="author" href="biography.html">about the author</a>

Above, the rel attribute indicates that this link is about the content’s author.

Rel attributes describe the nature of the hyperlink, not the content between the anchor’s tags. For example:

<a rel="author" href="jkrowling.html">Harry Potter</a>

In this example, the rel attribute indicates the author relates to the contents of jkrowling.html. Text between the tags is incidental.

What else can rel mean?

rel="accessibility"
A proposed rel value that points people using assistive devices to screen-reader-friendly pages.
rel="bookmark"
Indicates a key entry point within a page, like a particular subheading. For example, a company with three offices might “bookmark” each office’s address on their location page to make each office more specific than just sitename.com/locations.
rel="nofollow"
Denotes links that you don’t want indexed, like paths to a site’s CMS, members-only content or otherwise sensitive areas.
rel="tag"
Tags are hybrids between categories and keywords. Using rel="tag" in a hyperlink is like strapping jetpacks onto SEO keywords.

So what?

Rel attributes get us HTML-centric designers excited because we can style links with CSS3. For example:

Beyond aesthetic changes, CSS based on rel attributes provides solutions to design problems. They enrich a site’s visual vocabulary with little extra programming. Code it once, code it right, and off you go.

References

Tags: research semantics