I'm eager to move towards a more standards-based, accessible and semanticly-correct web development approach. At the office, I don't expect there to be huge changes straight away, but I'm trying to start laying down some of the basic foundations for progress further down the track. Part of this process is the introduction of the <code>rel</code> attribute in links and other such content. This extends further than the familiar old <pre class="prettyprint"><code><link href="mystyles.css" type="text/css" rel="stylesheet" /> </code></pre> which many developers would probably throw in without even thinking about it. I'm curious to know if anyone uses <code>rel</code> regularly in other ways. For example, setting your main navigation's link back to the home page with <code>rel="start"</code>. If you have implemented Link Relations in your own project, what prompted you to adopt them and what benefits were you trying to realise? If you have looked at Link Relations but decided against their use, what was the basis for your decision?

I frequently use the <code>rel</code> (and <code>rev</code>) attributes with a wide range of values on both <code><link/></code> and <code><a/></code> elements. I've outlined some of the more common (and more useful) relationship types below. A more complete list of <code>rel</code> values is maintained on the microformats wiki. <h3>HTML 4</h3> There are several standard link types defined by the HTML 4 specification. <ul> <li> <code>alternate</code> - Used when providing a link to an alternative version of an HTML document, for example in a different language or another format. This is most commonly used when linking to an syndicated (RSS or Atom) version of a web site.</li> <li> <code>next</code> and <code>previous</code> - Used to indicate the next and previous documents in a series of documents. If <code>rel="next"</code> is used on a <code><link/></code> element then some browsers will pre-fetch the contents of the linked document (see the MDC link prefetching FAQ).</li> </ul> <h3>XFN</h3> XFN (XHTML Friends Network) is a microformat used to describe the relationships between the people that are represented by web pages. It also allows a page to indicate other pages that represent the same person (e.g. my blog, my Twitter profile and my Stack Overflow profile all represent me). It does all of this by defining a set of <code>rel</code> values: <ul> <li> <code>me</code> - Used to indicate that the linking page and the linked page represent the same user. This is widely adopted by many social sites (including Stack Overflow) when linking from a user profile to the user's own web site.</li> <li> <code>contact</code>, <code>aquantance</code> and <code>friend</code> - indicates that you know the person you are linking and how well you know them.</li> <li> <code>met</code> - indicates that you have met the person you are linking to.</li> <li> <code>co-worker</code> and <code>colleague</code> - indicate that you either work with or work in the same field as the person you are linking to.</li> <li> <code>co-resident</code> and <code>neighbor</code> - indicate that you live with or near the person you are linking to.</li> <li> <code>child</code>, <code>parent</code>, <code>sibling</code>, <code>spouse</code> and <code>kin</code> - indicate that you are linking to a member of your family.</li> <li> <code>muse</code>, <code>crush</code>, <code>date</code> and <code>sweetheart</code> - indicate a romantic relationship with the person you are linking to.</li> </ul> These relationships can be parsed and used to determine information about a user, such as who their friends are or what other online profiles they possess. For more information on current, and potential future, applications of this the following pages might be of interest: <ul> <li>Ben Ward's article on Portable Social Networks.</li> <li>The list of XFN implementations on the microformats wiki.</li> </ul> <h3>Other</h3> There are various other link types defined by various specifications: <ul> <li> <code>nofollow</code> - Used to indicate that search engines should not follow a link when crawling a web page. See the rel-nofollow specification.</li> <li> <code>canonical</code> - Used to indicate that another URL is the canonical version of the current page and should therefore be favoured by search engines. This is also used with the <code>rev</code> attribute to indicate an alternative, usually shorter, URL for the current page (i.e. <code>rev="canonical"</code> indicates that the current URL is the canonical version of the linked URL). More information and tools can be found in Simon Willison's blog entry on rev=canonical.</li> <li> <code>tag</code> - Used to indicate that the linked page is a tag (i.e. keyword) describing the linking page. See the rel-tag specification.</li> <li> <code>license</code> - Used to indicate the license under which the content of the linking page is released. See the rel-license specification.</li> </ul>

One thing I've used them for is as a way to designate external links that should be opened in a new window. This functionality isn't possible with strict XHTML, because the <code>target</code> attribute is no longer allowed on <code><a></code> tags. But with some javascript and the <code>rel</code> attribute you can do a pretty decent job of it, as outlined in this article: New-Window Links in a Standards-Compliant World.

Do you commonly use Link Relations ("rel" attributes)?

Tags:

standards-compliance

attributes

semantic-markup

I'm eager to move towards a more standards-based, accessible and semanticly-correct web development approach. At the office, I don't expect there to be huge changes straight away, but I'm trying to start laying down some of the basic foundations for progress further down the track.

Part of this process is the introduction of the rel attribute in links and other such content. This extends further than the familiar old

<link href="mystyles.css" type="text/css" rel="stylesheet" />

which many developers would probably throw in without even thinking about it. I'm curious to know if anyone uses rel regularly in other ways. For example, setting your main navigation's link back to the home page with rel="start".

If you have implemented Link Relations in your own project, what prompted you to adopt them and what benefits were you trying to realise?

If you have looked at Link Relations but decided against their use, what was the basis for your decision?

221

asked May 11 '09 23:05

Phil.Wheeler

3 Answers

I frequently use the rel (and rev) attributes with a wide range of values on both <link/> and <a/> elements.

I've outlined some of the more common (and more useful) relationship types below. A more complete list of rel values is maintained on the microformats wiki.

HTML 4

There are several standard link types defined by the HTML 4 specification.

alternate - Used when providing a link to an alternative version of an HTML document, for example in a different language or another format. This is most commonly used when linking to an syndicated (RSS or Atom) version of a web site.
next and previous - Used to indicate the next and previous documents in a series of documents. If rel="next" is used on a <link/> element then some browsers will pre-fetch the contents of the linked document (see the MDC link prefetching FAQ).

XFN

XFN (XHTML Friends Network) is a microformat used to describe the relationships between the people that are represented by web pages. It also allows a page to indicate other pages that represent the same person (e.g. my blog, my Twitter profile and my Stack Overflow profile all represent me). It does all of this by defining a set of rel values:

me - Used to indicate that the linking page and the linked page represent the same user. This is widely adopted by many social sites (including Stack Overflow) when linking from a user profile to the user's own web site.
contact, aquantance and friend - indicates that you know the person you are linking and how well you know them.
met - indicates that you have met the person you are linking to.
co-worker and colleague - indicate that you either work with or work in the same field as the person you are linking to.
co-resident and neighbor - indicate that you live with or near the person you are linking to.
child, parent, sibling, spouse and kin - indicate that you are linking to a member of your family.
muse, crush, date and sweetheart - indicate a romantic relationship with the person you are linking to.

These relationships can be parsed and used to determine information about a user, such as who their friends are or what other online profiles they possess. For more information on current, and potential future, applications of this the following pages might be of interest:

Ben Ward's article on Portable Social Networks.
The list of XFN implementations on the microformats wiki.

Other

There are various other link types defined by various specifications:

nofollow - Used to indicate that search engines should not follow a link when crawling a web page. See the rel-nofollow specification.
canonical - Used to indicate that another URL is the canonical version of the current page and should therefore be favoured by search engines. This is also used with the rev attribute to indicate an alternative, usually shorter, URL for the current page (i.e. rev="canonical" indicates that the current URL is the canonical version of the linked URL). More information and tools can be found in Simon Willison's blog entry on rev=canonical.
tag - Used to indicate that the linked page is a tag (i.e. keyword) describing the linking page. See the rel-tag specification.
license - Used to indicate the license under which the content of the linking page is released. See the rel-license specification.

168

answered Oct 18 '22 20:10

georgebrock

I use the rel="nofollow" for user contributed links in blog comments. Google wont follow the link and it wont get a higher page rank because of the link.

answered Oct 18 '22 19:10

Bjorn

One thing I've used them for is as a way to designate external links that should be opened in a new window. This functionality isn't possible with strict XHTML, because the target attribute is no longer allowed on <a> tags. But with some javascript and the rel attribute you can do a pretty decent job of it, as outlined in this article: New-Window Links in a Standards-Compliant World.