views:

394

answers:

4

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?

+2  A: 

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.

Chad Birch
Yeah, that's actually one compelling reason why I'm starting to appreciate them more. jQuery allows me to track down any link with a rel attribute and "do stuff" with it.
Phil.Wheeler
I do the same thing +1
alex
Also, for CSS2-compatible browsers, you can easily style links with rel="external" (or whatever) to differentiate them from internal links.
harto
+3  A: 

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.

apphacker
A: 

As Chad said, I use rel="external" to designate links I'd like to open in a new window (leveraging some jQuery to make it possible).

I also use rel="nofollow" when I'd like to make the bots that follow rules (like Google bot) not index my link.

It's useful on public websites to automatically add the nofollow, otherwise it could become enticing for spammers to make a link farm out of your blog comments, for example.

alex
+7  A: 

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:

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.
georgebrock
Great answer. Thanks.
Phil.Wheeler