The Curious Case of Breadcrumbs in HTML

Published on Oct 3, 2013 (updated Jan 26, 2025), filed under development, html, semantics (feed). (Share this on Mastodon or Bluesky?)

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.

Update (January 6, 2025)

A late update, the HTML specification ended up proposing pretty much the solution outlined above in its section on common idioms.

^* “>” 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 web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)