|
Most of you are probably familiar with the <link> element. You use it to link to an external stylesheet, like this:
<link href="style.css" rel="stylesheet" type="text/css">
But <link>
has other uses of which you may not be aware. In particular, you can
use it to provide unobtrusive background navigation that will help some
users navigate your website. Consider this code:
<link rel="next" href="page2.html" type="text/html">
This tells the browser that "page2.html" is the next page.
The
main benefit is accessibility, because users can use the browser to
navigate your web page, rather than needing to discover your in-content
navigation. This is especially helpful to users of screen readers.
Another benefit is that some browsers, notably Firefox, will find any <link rel="next"> and begin downloading the page in the background. Mozilla calls this prefetching. The result? Instead of the usual delay, your next page may load instantly!
An example website
To work through this tutorial, you will need to download my example website.
I have already added the <link>s for you, except for on one page:
we'll work on this page during the tutorial, so that you end up with
this completed website.
It has a homepage, a help page, a glossary page, and an article of several pages. This is the file structure:
index.html (home page)
style.css
help.html
glossary.html
[article] (folder)
|---> index.html (Article introduction)
[section2] (folder)
|---> index.html (Article main page 2)
|---> subsection1.html (Subsection of page 2 topic)
|---> subsection2.html (Subsection of page 2 topic)
|---> subsection3.html (Subsection of page 2 topic)
[section3] (folder)
|---> index.html (Article main page 3)
|---> subsection1.html (Subsection of page 3 topic)
The file structure need not match the logical
site structure. In this example, the file /section2/index.html rests at
the same file level as its three logical subsections. This is
preferable because it allows users to navigate the site by truncating
URLs in the address bar: they will land on "index.html" automatically
(note: this assumes your web server is configured to look for
"index.html" when it gets a directory request).
Browsing by <link>s
Download Opera or SeaMonkey. Both these browsers have a navigation toolbar that uses <link rel="...">
to create in-browser navigation. In Opera, you can enable this with:
View > Toolbars > Navigation bar. For the purposes of this
tutorial, I strongly recommend using SeaMonkey: it supports more <link rel="..."> options, so you will be able to experience using these accessibility aids for yourself.
Try
browsing our website in SeaMonkey, just to get familiar with using this
method of navigation. When you come to "Article main page 2", you´ll
notice that this navigation fails. That´s because I've left this page
for you to work on during the tutorial.
Open up article/section2/index.html, and look at the <head> element. You´ll find the following code:</head>
<head>
<title>Article main page 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../style.css" rel="stylesheet" type="text/css">
</head>
Now let's start adding <link>s. They belong anywhere inside the <head> element:
<head> <title>Article main page 2</title>
<link rel="home" href="../../index.html" type="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../style.css" rel="stylesheet" type="text/css">
</head>
Try viewing the page again. You should now be able to use the navigation menu in the browser to find the homepage.
We can do much better than this, however. There are lots of useful <link>s to add. Start with these:
<link rel="help" href="../../help.html" type="text/html"
<link rel="glossary" href="../../glossary.html" type="text/html">
<link rel="contents" href="#toc" type="text/html">
Rel="help" directs users to a help page;
"glossary" directs them to a glossary of terms. "Contents" is a table
of contents; in our example, I've placed the table of contents on the
same page, at the bottom.
Now let's add some structural <link>s:
<link rel="next" href="subsection1.html" type="text/html">
<link rel="prev" href="../index.html" type="text/html">
<link rel="first" href="../index.html" type="text/html">
<link rel="last" href="../section3/index.html" type="text/html">
<link rel="top" href="../index.html" type="text/html">
This requires some explantion. I'm treating "next" and "previous" as cycling through all the pages in the article, in sequence. But I'm not using "first" and "last" in the same way.
I use "first" and "last" to mean "first or last page at the same level". This allows users to jump to the first page in a section.
If you treat "first" and "last" as "ultimate next" and "ultimate prev",
then they are less useful (I think), because every page will have the
same "first" and "last". Also, "first" will always be redundant,
because that function is fulfilled by "top" (see below).
In this example, the last page in the article is article/section3/subsection1.html, but the last page at the same (logical) level is article/section3/index.html. It turns out that both concepts of "first" coincide for this page, but that's not true on any of the subsection pages.
You
don't have to use "first" and "last" in this way. That's just what I
think is most useful, but it could be counter-intuitive: one might not
expect "prev" to go back farther than "first"; indeed, the user
interface for SeaMonkey suggests this. Whatever you choose, try to be
consistent within your site.
"Top" means "go to
the top-level page of this document collection". This is not the same
as "home", which is the top-level page for the whole website. "Up" means "go up one level in the hierarchy."
Notice that "top", "first", and "prev" are pointing to the same page. This coding seems redundant, doesn't it? Well, according to the standards, it is redundant: you should be able to write:
<link rel="top prev first" href="../index.html" type="text/html">
Unfortunately, Opera doesn't understand this, and will ignore the whole <link>. Therefore, unless you are an especially grim and bloody-minded standards advocate -- the type of person who has a poster of Dave Raggett on his bedroom wall -- you will relent and permit these few extra lines of code.
Now let's deal with sections:
<link rel="section" href="../index.html" type="text/html">
<link rel="section" href="index.html" type="text/html">
<link rel="section" href="../section3/index.html" type="text/html">
I use "section" to indicate the main sections of an article. You may notice that the second <link> is pointing to the page we're already on. This might seem to contravene a usability principle, similar to "Don't include an active link to the homepage on the homepage".
But look at how the navigation actually works in SeaMonkey: it presents
a pull-out list of sections. This helps the user to discover the
structure of the page, so we should include these self-referring <link>s (or the list of sections will be incomplete, and change from page to page).
Subsections are straightforward:
<link rel="subsection" href="subsection1.html" type="text/html">
<link rel="subsection" href="subsection2.html" type="text/html">
<link rel="subsection" href="subsection3.html" type="text/html">
Unlike "section", I use "subsection"
relative to the current page, not the whole article: I use it to mean
"subsection of the current page". Keep your section and subsection
links in the correct order, because the browser will list them in the
order you write them.
Using the "title" attribute
Adding
a title to your links will aid accessibility even more, because
browsers can integrate this into their navigation. SeaMonkey uses the
titles for labelling its menus. For example:
<link rel="subsection" href="subsection1.html" title="Subsection-1 of page 2 topic" type="text/html">
With ordinary <a> links, you rarely need specify a title, because the link text itself should be descriptive: <a href="subsection1.html">Subsection-1 of page 2 topic</a>. With <link>s, you don't have any link text; the only way to describe your <link> is to add a title.
For <link>s that refer to the current page, why not indicate this in the title? For example, use this on the homepage:
<link rel="home" href="index.html" title="Home page (you are here)" type="text/html">
Again, I recommend keeping these self-referring <link>s. The usability issues are not the same as active/inactive <a> links.
I
know it's tiresome work adding titles, but it does improve
accessibility. To complete the tutorial, add titles to all your
<link>s. Alternatively, save yourself the effort by downloading
the finished website.
The result of your work
The <head> element should now look like this:
<head>
<title>Article main page 2 </title>
<link rel="home" href="../../index.html"
title="Home page" type="text/html">
<link rel="glossary" href="../../glossary.html"
title="Glossary" type="text/html">
<link rel="help" href="../../help.html"
title="Help page" type="text/html">
<link rel="next" href="subsection1.html"
title="Subsection-1 of page 2 topic" type="text/html">
<link rel="prev" href="../index.html"
title="Article introduction" type="text/html">
<link rel="first" href="../index.html"
title="Article introduction" type="text/html">
<link rel="top" href="../index.html"
title="Article introduction" type="text/html">
<link rel="last" href="../section3/index.html"
title="Article main page 3" type="text/html">
<link rel="section" href="../index.html"
title="Article introduction" type="text/html">
<link rel="section" href="index.html"
title="Article main page 2 (you are here)"
type="text/html">
<link rel="section" href="../section3/index.html"
title="Article main page 3" type="text/html">
<link rel="subsection" href="subsection1.html"
title="Subsection-1 of page 2 topic" type="text/html">
<link rel="subsection" href="subsection2.html"
title="Subsection-2 of page 2 topic" type="text/html">
<link rel="subsection" href="subsection3.html"
title="Subsection-3 of page 2 topic" type="text/html">
<link rel="contents" href="#toc"
title="Table of contents" type="text/html">
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<link href="../../style.css" rel="stylesheet" type="text/css">
</head>
Some designers might dislike this, because it
adds a lot of code. Yes, this will increase your file size -- by a
trivial amount. All those <link>'s are useful for accessibility, and a few more bytes is little cost, given the benefit to your users.
The other pages
On some pages, I've added yet another <link> type: <link rel="up">. This means "go up one level in the hierarchy". On the article introduction page, I allow the scope of "up" to go outside the article, to the next level in the website. This means that "up" actually goes one level higher than "top"!
Why
have I done this illogical-seeming thing? Because I think it's useful.
It lets users travel up a document hierarchy, without missing important
steps along the way. This is much the same as my treatment of "first"
vs. "prev".
Other link types
Check out the navigation menu in SeaMonkey. This will give you ideas for other <link> types you can use.
Should you add a search box or page to the website, then <link rel="search"> would be very useful.
An immature standard
The W3C defines a short list of <link> rel-types. There are several problems with this list:
- It's insufficient. Browsers actually support several important non-standard types, such as "home" and "search".
- Some
non-standard types are better supported than standard types. For
example, the W3C recommends "start", but Opera and Seamonkey use
"first" instead.
- It's not always clear what the correct uses are.
Using non-standard <link> types will not make your code invalid; you're not even violating any W3C guideline. Standards only develop after use becomes widespread: so by using non-standard <link>
types liberally, with thought for logical structure and accessibility,
you will actually be helping to develop this useful, but immature,
standard.
"Isn't this a lot of time to be spending on something most visitors will never see?"
Yes, it is. Adding <link>s to your website takes a long time if you do it thoroughly, and most people will never know they exist. Don't forget that you will make mistakes, so you should test the website carefully in SeaMonkey.
Whether you bother is entirely up to you. Very, very few designers do bother (few even realise it's possible).
Yet,
despite the time required and the immaturity of the standard, I think
this is a fantastic accessibility aid. The example in this tutorial is
extreme, and you need not be so detailed (most sites don't have such an
academic structure anyway).
Even just including the <link>;s
for important pages, such as "home", "help", and "search" is a good
idea. You can set these up to be automatically included on all your
pages (use absolute rather than relative paths). That's not much work.
Official W3C information about <link>s
Mike is a writer who dallied with professional web design; he still designs web pages for his own nefarious purposes.
|
iEntry 10th Anniversary
Announcements
Contact
