Creating Common Page Elements - Pro CSS Techniques - page 175

Breadcrumb Trails
A breadcrumb trail is an often-used technique on web sites for letting visitors know exactly where
they are within the site hierarchy. It's a great way to allow people to jump several levels back up the
site, and it's also invaluable for orienting visitors who arrive at the site from a search engine result.
Unfortunately, it's nearly always the case that when you see these breadcrumbs, the
markup used for it is something like this:

<div class="breadcrumb">You are in: <a href="/preferences/">
preferences</a> &rarr; <a href="/preferences/page-style/">page style</a> &rarr;
</div>

Showing the Hierarchy of the Breadcrumb Trail
In the previous example, the links look fine and the XHTML is all valid, so what's the problem?
If you think about it, a breadcrumb is a reflection of a site hierarchy (imagine navigating through
folders on your own computer—it's effectively the same as the process the server does when
trawling through the file system). What you really want is something that hints at that hierar-
chy, and nested lists can give you just that. Let's look at the travel site example; this is how the
breadcrumb trail appears on the page:

You are in Travel > Destinations > Europe

This could be better expressed in the XHTML like this:

<div id="breadcrumb">
You are here:
<ul>
<li><a href="/travel/">Travel</a>
<ul>
<li><a href="/travel/destinations/">Destinations</a>
<ul>
<li>Europe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

■

Note At this point, some people may claim that this is a case of semantics gone mad—that all you really
need is a straight line of text links with an appropriate separator between them. That might do the job visu-
ally, but it's good to think about the relationship that elements have with one another, and that's partly why
we've gone for this technique rather than a flat piece of text.