Rad Geek People's Daily

If you are publishing documents on the web, W3C in Web pages that use <link> tags are more accessible for users with disabilities, and they are more easily navigable for viewers who use up-to-date web browsers that make intelligent use of web standards (such as Mozilla and Opera). So how come so many of the W3C web pages — and the very web page extolling the benefits of the <link> tag (!) — don’t include appropriate <link> tags?

The tip sheet, for example, is part of an ordered list of tips with an index — so why doesn’t the page define standard navigational links such as next (for the next tip) and previous (for the previous tip) and index (for the list of all the tips) and up (for the list of all the tips, or for the Quality Web homepage)?

It is unfortunately the case that you should do as the W3C says, not as they do.

(For those of you who do HTML publishing but are mystified about what link tags are and what they do, read on: I discuss it at some length in the extended entry.) <link> elements are part of the metadata for a web document. They provide machine-readable data about the data on a particular page. In particular, a <link> tag defines a relationship between the resource at this URI and a resource at another URI.

So why bother? What’s the benefit?

• Some web design tricks — such as specifying a shortcut icon for your website — are accomplished using <link> tags.
• It makes your site easier to navigate — and it especially helps people who first encounter your website through finding a particular page on a search engine.
• It makes your site more accessible to the disabled.

That said, here is one very common way that <link> is used:

 <link rel="stylesheet" type="text/css" href="/styles/radgeek.css"
     media="screen" title="Stylesheet" />

This is how you usually specify the Cascading Style Sheet for a particular HTML document. Conceptually, here’s what’s going on: the tag defines a link — a relationship between this URI and another URI — specified in the href="..." parameter–in this case, my stylesheet at http://www.radgeek.com/styles/radgeek.css. The nature of the relationship is specified by the rel="..." attribute: the URI points to the stylesheet for this document. Additionally, we tell the web browser that the type of the resource is text/css — that is, it is implemented in the CSS standard. And we tell it that this is the stylesheet for the screen medium: it is used to render documents when they are presented on a computer screen, but not when they are (for example) printed — we use a different, printer-friendly stylesheet for that:

 <link rel="stylesheet" type="text/css" href="/styles/radgeek-prettyprint.css"
     media="print" title="Stylesheet" />

Fair enough. But that’s not all you can do with the <link> tag. There are all kinds of navigational relationships that you can encode. For example, here’s excerpts from the header section of yesterday’s post:

 <link rel="author" href="/contact" />
 <link rel="SHORTCUT ICON" type="image/png" href="/radgeekicon.png" />
 
 <!-- Site navigational structure -->
 <link rel="Home" href="/" title="Rad Geek People's Daily" />
 <link rel="Top" href="/" title="Rad Geek People's Daily" />

 <link rel="Search" href="/search" title="Search This Site " />
 <link rel="Copyright" href="/about/copyleft_notice.html"
       title="Copyleft Notice - About Rad Geek People's Daily" />
 <link rel="Help" href="/about/accessibility_statement.html"
       title="Accessibility Statement - About Rad Geek People's Daily" />
 <link rel="alternate" type="application/rss+xml" title="RSS"
       href="http://www.radgeek.com/index.rdf" />

 <link rel="prev"
       href="http://www.radgeek.com/gt/2004/01/22/happy_roe.html"
       title="Happy Roe v. Wade Day!" />
 <link rel="up" href="http://www.radgeek.com/gt/2004/01/index.html"
       title="January 2004" />

So what do all these tags do? Well, we can divide them into a few different groups.

• Presentational links, such as the stylesheet link you’re already familiar with, and the SHORTCUT ICON tag used above, are links to URIs that tell the browser something about how to render the website. A <link rel="stylesheet"> defines the stylesheet; a <link rel="SHORTCUT ICON"> tells a browser where to find that nifty little icon that appears by the the page title in most modern web browsers. (N.B.: One of Internet Explorer’s many shortcomings with regard to web standards is that it does not support platform-independent graphical file formats such as PNG for shortcut icons; it requires the platform-specific Windows ICO format icon files. If you use a PNG file for your icon in the <link rel="SHORTCUT ICON"> tag, then it will not display in Internet Explorer. You can, however, get around this problem by creating an ICO version of your icon, naming it favicon.ico, and placing it in the home directory of your website.)

• Site navigation links give the web browser general information about important navigational pages on this website. A <link rel="top"> or a <link rel="start">, for example, specifies the front page for this site (usually your homepage). <link rel="search"> specifies the search page for this site; <link rel="copyright"> lets the web browser know where the copyright / fair use statement for this document is. <link rel="help"> defines a help page; you may want to use this (as many do, including myself) to point to the accessibility statement that describes the navigation and accessibility features of your website. You can also, although I have not done so here, point to a site map or table of contents with <link rel="contents">, an index with <link rel="index">, or a glossary with <link rel="glossary">.

• Navigational context links are closely related: they give information about the context of this particular page in the navigational structure of your website. If you have a number of web pages in an ordered sequence (for example, individual weblog posts, or individual pages of a multi-page article, or chapters of an e-book), you can specify the next and previous items in the series using <link rel="next"> and <link rel="prev">.You can also, if it makes sense to do so, include <link rel="first"> and <link rel="last"> as well. (Note that <link rel="first"> is different from <link rel="start">. A start link defines the starting page of your website — usually the homepage. A first link points to the first item in a series. So, for example, if you have an article split over multiple pages, the first link should point to the first page of the article; the start link should point to your homepage, not to any of the pages within the article.)

• Metadata links provide some other sort of meta-data about the page. For example, <link rel="alternate"> specifies where alternate versions of a document are. You can use this (as I do above) with the type="..." attribute to specify versions of the same document in another format (such as the RSS newsfeed for a particular weblog, or a PDF version of the current document, or …). But you can also use it (as I do not) with the hreflang="..." attribute to specify a translation of the current page into another human-readable language. (For example, <link rel="alternate" href="..." hreflang="fr" title="en Français" /> would give a URI for a French translation of the current document, with the human-readable title en Français.

  A <link rel="author"> author tag gives a URI identifying the author of the current page. Traditionally, this has been used to allow viewers to send comments to the author, so people have usually filled in the href="..." attribute with a mailto: URI for their e-mail address. Unfortunately, many spammers now use these links to harvest e-mail addresses for spamming; for this reason, it may be better to fill it in (as I do) with a URI to a contact page on the web. (Actually, that’s a better thing to do anyway–mailto: links are disruptive of the user experience in a web browser and ought to be minimized. But that’s a horse to be beaten on another day.)

For some more about using <link> tags, you can read up at Dive Into Accessibility Day 9: Providing additional navigational aids.