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 here.

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.

Example

In this example, the rel attribute indicates that the referenced document is a style sheet:

<link rel="stylesheet" href="basic.css"/>

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).