demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Using rel in HTML5

seo / introduction

Estimated reading time: 2 minutes, 8 seconds

Most web developers use the <link /> tag and the rel attribute just twice per page: to bring in an external style sheet and load a favicon. But rel actually has many uses. In previous articles I’ve talked about using the tag to indicate the next and previous logical pages: Firefox even uses these to preload content, making any transition to those pages smoother and faster. These techniques are all still valid in HTML5, but rel can be used for far more. Some examples:

rel="author"

As with almost all uses of link, this is written in the <head> section:

<link rel="author" href="about.php">

Under HTML5 rel="author" is supported in the body as well, if it is part of a link:

Written by <a rel="author" href="http://demosthenes.info/about.php">
Dudley Storey</a>

Google has indicated that they will use using this to identify the authors of articles for documents written in HTML5, as opposed to the Dublin Core creator tag. The one condition is that the supplied URL must go to a page that talks about the author that exists on the same domain.

rel="archives"

Indicates the location of an archive page: for example, a page that lists all of the articles in a blog. It may also be attached to a hyperlink:

<a rel="archives" href="archives.php">Articles</a>
rel=external

Used almost exclusively for links in the body to indicate that a linked resource is outside the current domain. It is useful for adding to comments (as you can set up robots.txt file to have search engine spiders ignore external links, avoiding any reward to comment spammers; rel=nofollow might be used for the same reason), and for presenting external links differently in or by using an attribute selector.

rel="license"

Indicates the conditions of a license governing the uses and permissions of site content. Associated with Creative Commons but supported by other license systems. May be used in the <head> as <link />, or an <a> element in the <body>.

rel="search"

Links to a search document that follows the OpenSearch.org format.

rel=first,last,up

In addition to the next and prev values mentioned above, first, last and up define appropriate resources in a sequence that could be appreciated linearly. (Think first and last articles and in blog). “up" is perhaps best understood as a shortcut for “home”, but could also be used to indicate “go up a level” in a site organized on a hierarchical model.

rel="me"

Google’s own suggestion to verify identity on web pages (as Google+ insists on Real Names for users). The href attribute should be set to your Google+ URL. My personal example would be:

<a rel="me" href="https://plus.google.com/115433388220321744732">
Dudley Storey</a>
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.