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 (
<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!
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="https://dab1nmslvvntp.cloudfront.net/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.
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.
In this example, the
rel attribute indicates that the referenced document is a style sheet:
<link rel="stylesheet" href="basic.css"/>