rel (HTML attribute)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Partial | Partial | Partial |
| Depr. | Version |
|---|---|
| No | HTML 2 |
Example
<link rel="stylesheet" href="basic.css" />
Description
The rel
attribute defines the relationship that the linked resource has to the
document that is referencing it. In most cases, this will simply be
"stylesheet", meaning, not surprisingly ‘the referenced
document is a stylesheet’. Nothing too complicated there. Related to this
value is "alternate", which is used alongside the
"stylesheet" value - rel=”alternate
stylesheet” - and is used to indicate that there is another style
associated with the page. In fact you can define several alternate styles,
although the main issue with this is making it clear to the user that
there is an alternate style sheet available. In Firefox, you can chose
View > Page Style and pick from the available style sheets on offer,
but there is no obvious indication in any browser that these alternates
exist - it is 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 sheets 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 is what appears in the browser’s page style menu options:
Opera also offers the ability to change the page style in this way from the ‘View’ menu option, but does not 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 - which will appear in most browsers 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) - then 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 would have to amend the location as specified in the
href attribute accordingly.
The relationship
aspect of “rel“ really becomes more rich in terms
of context/orientation when used for defining 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 the
section on Microformats’ use of the
rel attribute for more information about
this.
There are many custom relationships between pages that you
could define with the link element, beyond the
pre-defined values.
Value
Refer to the syntax diagram for the
acceptable pre-defined values. However, you are not limited to these alone
- you can define your own rel attribute value, but
it will not be of much use to any web browser (although you might be able
to use that information for some other purpose, for example
querying/accessing using JavaScript and the DOM).
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Partial |
| 1.5 | Partial | |
| 2.0 | Partial | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | Partial |
| 9.5 | Partial |
The support charts for this element show as ‘partial’ for most browsers, as some are able to provide access to alternate style sheets when they are encountered (Firefox, Opera), but do not alert the user to the fact that the alternatives are present.
Of those browsers tested, only Opera
provided a facility to navigate pages using a toolbar that activated
certain options “previous”, “next” etc when a link
element with a matching rel attribute was found (but even then, this
toolbar is hidden by default because, by and large, it would sit there
doing nothing for the majority of web sites). Firefox does not have this
capability by default, but you can install an extension that reveals these
navigation features.
With the exception of IE5.5 and IE6, 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 how it’s treated and cached, displayed in favorites etc differs from browser to browser and operating system.
You may get better value for money using this attribute by plugging in extra functionality using JavaScript and the DOM or through a centralised web service of some kind that may be able to make use of the attribute’s content (perhaps for analytical purposes, or for refining search results).
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
