The Curious Case of Breadcrumbs in HTML

Published on October 3, 2013 (↻ February 5, 2024), filed under Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

We had an interesting thread about breadcrumbs on W3C’s public-html the other day. At first just targeting delimiters (greater thans are not so great ^*), it spawned a debate about the appropriate markup. I dreaded the subject as much as I welcomed it. I dreaded it because the topic comes up again and again; I welcomed it to come to a resolution on a W3C list.

One View

We don’t have such a resolution yet but I like to use the occasion to lay out my own view on breadcrumbs in HTML.

The matter has always looked simple to me ^†. There is no dedicated breadcrumb element, like <breadcrumb>. The only elements remotely adequate then were list elements, but they appear out of the question for reasons I share in a second. Which has, prior to HTML 5, left only one element, the one that’s been designed to cover cases for which there is no dedicated markup: <div>, to be used with an ID like “breadcrumb,” as we know how semantics works and as we’re likely to use only one trail.

Two Questions

As I said on said W3C thread, a div would not be great, but acceptable. But that still leaves two important questions:

1. Why No Lists?

Some lists are clearly not suitable for breadcrumbs, like dl, menu, or, if you want, dir, so the list question typically refers to ul and ol.

Unordered lists don’t seem appropriate because breadcrumbs are not an unordered list of related items. They are a somewhat ordered hierarchical list of unrelated items. That leads us straight to ordered lists:

Ordered lists don’t seem appropriate because breadcrumbs don’t represent an order in the sense of first this, then that, then something else. They are a somewhat ordered hierarchical list of unrelated items. That suggests:

Nested lists, which don’t seem appropriate because they’re too much code for the job. (They are, as Reinier Kaper put it, “terribly cumbersome,” and indeed, as I put it, like using “lists for sentences, as sentences are lists of words.”) This is the direct result of what I mentioned before, there just is no dedicated element for breadcrumbs.

I realize that lists still exercise some pull. Breadcrumbs seem to have something “list-y.” My point here is that that’s not enough. It would require one of the HTML editors, like Ian, to rewire my head here.

2. What About HTML 5?

That’s an important and nowadays obvious question. And with the nav element we find an interesting answer:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Evidently, breadcrumbs link to other pages, and they also represent navigation links. That just doesn’t make them lists, so nav would work like div in the markup I suggested in the beginning:

One Solution

Putting everything together, the simplest adequate markup for breadcrumbs seems to be

<nav id=breadcrumb><a>Item 1</a> → Item 2</nav>

or, in anything HTML that’s not HTML 5,

<div id=breadcrumb><a>Item 1</a> → Item 2</div>

If the ID (or class in case of several occurrences) is actually needed or wanted, that is.

Case solved? Let’s find the holes.

^* “>” is a poor delimiter for functional and typographical reasons. “→” is one of the nicer alternatives. It can be argued that breadcrumb delimiters are content and should be part of the document, not of the style sheet. That’s the case I’m building in the examples.

^† So simple that I’ve sometimes just used a div or p element without any ID or class—like currently on this site.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Be critical, interpret charitably, and give feedback.)

Comments (Closed)

1. On October 4, 2013, 3:20 CEST, Šime Vidas said:

   “in anything HTML that’s not HTML 5” - Could you explain what this means?

2. On October 4, 2013, 3:26 CEST, Neovov said:

   Breadcrumb are a textual representation of a tree structure. By definition, we lose some informations (siblings, deepness, etc.).

   HTML5 is still a poor semantic language.
   Should it be more semantic? For what purpose?

   What matters is if the user is capable of making a mind-map of that tree.

3. On October 4, 2013, 5:07 CEST, Jens Oliver Meiert said:

   Šime, sure—I’m referring to older flavors of HTML (and XHTML) here that didn’t include nav.

4. On October 4, 2013, 9:46 CEST, at said:

   Seems like a bad solution for no problem at all. Since “somewhat ordered” means “ordered”, lets keep it written as an ol and wrap it in a nav. And since there are not that many breadcrumbs on a given page the appropriateness of nested lists obviously depends on the laziness of the coder, not on traffic issues.

5. On October 4, 2013, 13:27 CEST, Yannick said:

   I think using nav and ol elements would be a nice solution, for example:

   <nav class="breadcrumb">
     <ol>
       <li>Item 1</li>
       <li>Item 2</li>
     </ol>
   </nav>
   

   I my opinion nested ordered lists are the best solution representing a breadcrumb so far. It’s a bad argument that they’re too much code.

6. On October 4, 2013, 16:31 CEST, David said:

   Why not use a custom element? Why not register a <breadcrumb> element? Is that not a valid approach that also meets semantic needs?

7. On October 5, 2013, 14:11 CEST, Martijn said:

   I still think some of the best thoughts on breadcrumbs are captured in the comments of Dan’s 12th SimpleQuiz and its conclusion.

8. On October 5, 2013, 21:33 CEST, Jens Oliver Meiert said:

   at, mileage obviously varies but I do not recommend the nested solution as that attempt is going overboard. Way too much code for way too little gain.

   David, I haven’t seen—may or may not mean much—a proposal for such an element but that’s indeed a good question. There seem to be enough uses of breadcrumbs. I might ping Ian to find out more—maybe nav was intended to cover this case.

9. On October 7, 2013, 17:31 CEST, Niels Matthijs said:

   I still prefer lists.

   Not nested lists though. A breadcrumb represents a path through a tree, not the tree itself. The consecutive items make it clear we’re going step by step down the tree structure, so the path is just one-dimensional.

   When you don’t want lists, then at least use block elements to differentiate between element. With inline elements a breadcrumb becomes a single “sentence” which makes no sense at all. Each link is a separate entity, not part of an inline expression.