3

Trying to work out how best to mark up a breadcrumb area on my page and I'm not sure how I should contain it. In my mind there are three options:

Option 1 - Just Links

<nav>
    <a ...>Link 1</a>
    /
    <a ...>Link 2</a>
    / ...
</nav>

Option 2 - An Ordered List

<nav>
    <ol>
        <li>
            <a ...>Link 1</a>
        </li>
        <li>
            ...
        </li>
        ...
    </ol>
</nav>

Option 3 - An Unordered List

<nav>
    <ul>
        <li>
            <a ...>Link 1</a>
        </li>
        <li>
            ...
        </li>
        ...
    </ul>
</nav>

Which would be the best to use?

Improve this question

1 Answer 1

Reset to default
2

As this source suggests, this is the recommended markup:

<map title="Breadcrumbs">
    <a href="/">Home</a> 
    > <a href="/foo">Foo</a> 
    > <a href="/bar">Bar</a> 
</map>

The links are part of the G65, which states:

Breadcrumb trails are implemented using links to the Web pages...

The <map> tag is from H50.

Yet, you may wish to consider what seems to be a more popular markup, using <nav> instead of <map>:

<nav title="Breadcrumbs">
    <a href="/">Home</a> 
    > <a href="/foo">Foo</a> 
    > <a href="/bar">Bar</a> 
</nav>

Breadcrumbs are definitely not lists (ordered or not) since they are just a path within an hierarchy. A list involves siblings, which are not part of breadcrumbs.

Improve this answer
3
  • 2
    Hmm, I'm not sure about using the <map> element, this seems to go against the HTML5 specification: "The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children." The HTML4.01 specification is different in that it states "... image map (or other navigation mechanism)".
    – James Donnelly
    Mar 13, 2015 at 21:31
  • I can't really challenge that (despite H50). From what I've seen <nav> is much more popular. I'll amend my answer.
    – Izhaki
    Mar 13, 2015 at 21:34
  • microformats.org additionally suggests using role="navigation" aria-label="breadcrumbs" on the container, but I've seen recommendations along the lines of "don't role it if the tag already has that meaning", too.
    – Ulrich Schwarz
    Mar 14, 2015 at 8:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.