rel (HTML attribute)

Description

The rel attribute defines the relationship that the linked resource has to the document from which it’s referenced. In most cases, this resource will simply be "stylesheet", which means, not surprisingly, “the referenced document is a style sheet.” Related to this value is "alternate", which is used alongside the "stylesheet" value (rel="alternate stylesheet") to indicate that there’s another style associated with the page. In fact, you can define several alternative styles, although the main issue with this approach lies in making it clear to the user that an alternative style sheet is available. In Firefox, you can chose View > Page Style and pick from the available style sheets on offer, but there’s no obvious indication in any browser that these alternatives exist—it’s usually left to the developer to provide some kind of JavaScript-based style switcher that renders as a control on the page. The following markup shows a page that has one main style sheet and two alternatives:

<link rel="stylesheet" href="main.css"
    type="text/css" media="screen"/>
<link rel="alternate stylesheet" title="Higher Contrast"
    href="contrast.css" type="text/css" media="screen"/>
<link rel="alternate stylesheet" title="Gratuitous CSS"
    href="hot.css" type="text/css" media="screen"/>

Note that when you use an alternate style sheet, you should also provide a title attribute that briefly describes the style—this will appear in the browser’s page style menu options, as shown in Figure 1.

Figure 1. The title of the style sheet, as shown in Firefox

Opera also offers us the ability to change the page style from the View menu option, but doesn’t otherwise draw attention to the alternate style—you have to go hunting for it!

The "alternate" attribute value may also be used in the context of XML feeds, namely RSS or Atom, which are indicated with the type attribute:

<link rel="alternate" type="application/rss+xml"
    href="/rss.xml" title="RSS 2.0">
<link rel="alternate" type="application/atom+xml"
    href="/atom.xml" title="Atom 1.0">

If you want to associate a custom icon with your web site (in most browsers, the icon will appear alongside the URL in the address bar, but may also be used when saving a page as a favorite or as a shortcut on the desktop, depending on the browser or operating system), you can use the rel attribute as follows:

<link rel="shortcut icon" href="/favicon.ico"/>

The link refers to an icon that sits in the web server’s document root folder, and the convention is to name it favicon.ico (must be a .ico file, not a .gif, .jpg or .png). You could place the favorite icon elsewhere on the web server, but you’d have to amend the location specified in the href attribute accordingly.

The relationship aspect of rel really becomes more rich in terms of context and orientation when the attribute is used to define how pages are related to each other. For example, in a sequence of pages that have a logical, linear flow, you can use the rel attribute to define the "next" and "prev" pages in the sequence.

The rel attribute can also be used to indicate the license that applies to the content on the page, using rel="license" href="link-to-license.html". Refer to Microformats’ use of rel for more information about this.

You could define many custom relationships between pages with the link element, by moving beyond the predefined values to specify your own.

Value

Refer to the syntax diagram for the acceptable predefined values. Remember, though, that you’re not limited to these alone: you can define your own rel attribute value, but it won’t be of much use to any web browser (although you might be able to use that information for some other purpose, for example, for querying or accessing the attribute’s value using JavaScript and the DOM).

Compatibility

The support charts for this element show that partial support is provided by most browsers, as some (Firefox and Opera) are able to provide access to alternate style sheets when they’re encountered, but do not alert the user to the fact that the alternatives are present.

Of those browsers tested, only Opera provides a facility to navigate pages using a toolbar that activates certain options, such as “previous” and “next,” when a link element with a matching rel attribute is found (but even then, this toolbar is hidden by default because it would do nothing for the majority of web sites). Firefox doesn’t have this capability by default, but you can install an extension that reveals these navigation features.

With the exceptions of IE 5.5 and IE 6, all the browsers were able to understand and do something useful with a link to an XML feed, be that RSS or Atom, usually by indicating the presence of the feed with an icon in the address bar.

The favicon shortcut is well supported, but the way in which it’s treated, cached, displayed in your browser’s favorites, and so on, differs between browsers and operating systems.

You may get better value from this attribute if you plug in extra functionality using JavaScript and the DOM, or if you use a centralized web service of some kind that’s able to make use of the attribute’s content (perhaps for analytical purposes, or for refining search results).