What semantic HTML markup should be used to create breadcrumbs?

Question

What meaningful HTML tag should be used to create breadcrumbs? I have a menu bar which is created using unsorted list since it is a list:

<ul id="navigation">              
    <li><%= Html.ActionLink("Home", "Index", "Home") %></li>
    <li><%= Html.ActionLink("Contacts", "Index", "Contacts") %></li>
</ul>

Now, I decided to put a breadcrumbs below the menu, the problem is, I don't know what tag should I use. As much as possible, I want to use meaningful tags. Please help me...

Answer 1

There's plenty of ways of marking up breadcrumbs. A list is fine. An ordered list is more appropriate for breadcrumbs because it is a list of links in a particular order.

If you don't want to use a list, you could instead leave them as a set of links in a div . Although if you're using HTML5, you may want to put them in a nav element.

Finally, the HTML5 spec suggests using a p element because they could be read as a paragraph of direction on how to get to the particular page.

Answer 2

Old post but came up high in a search and I think things have changed a bit since this question was originally asked.

In a html5 site I would use the nav tag as breadcrumbs are technically navigation through the site. If you want to make it even more clear what they are you can add microdata to state that they are breadcrumbs.

From Googles example and html5doctor

<nav>
<ul>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">     
        <a href="http://www.example.com/dresses" itemprop="url">
            <span itemprop="title">Dresses</span>
        </a> 
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/dresses/real" itemprop="url">
            <span itemprop="title">Real Dresses</span>
        </a> 
    </li>  
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
            <span itemprop="title">Real Green Dresses</span>
        </a>
    </li>
</ul>

Answer 3

Using an unordered list for your breadcrumbs seems perfectly reasonable to me; there isn't always a named tag for every application specific structure and you are displaying a list of breadcrumbs afterall.

You can use css to make the bread crumbs display the way you would like.

Answer 4

If you don't want to use an ordered list or paragraph tags, you could always use a nested list to semantically represent the hierarchical nature of the breadcrumbs.

The following example comes from Mark Newhouse's A List Apart article entitled "CSS Design: Taming Lists."

<div id="bread">
<ul>
  <li class="first">Home
  <ul>
    <li>&#187; Products
    <ul>
      <li>&#187; Computers
        <ul>
          <li>&#187; Software</li>
        </ul>
      </li>
    </ul></li>
  </ul></li>
</ul>
</div>

Answer 5

to create breadcrumb you can use following ways: (you should use nav as wrapper to tell bots there's some internal links, if you're using html5)

1. Matthew Rankin's answer describes this one.
2. second way using ol list instead of first way like below to tell bot there's an order between items:

    <nav> <ol class="breadcrumb"> <li><a href="#">Top Level</a></li> <li><a href="#">Second Level</a></li> <li><a href="#">Third Level</a></li> <li>Current Item</li> </ol> </nav>

3. third way is using p tag and rel up for links(rel up is not final!)

    <nav> <p> <a href="/" rel="index up up up">Main</a> > <a href="/products/" rel="up up">Products</a> > <a href="/products/dishwashers/" rel="up">Dishwashers</a> > <a>Second hand</a> </p> </nav>

Answer 6

总是结帐雅各布尼尔森：自 2003 年以来，他一直推荐“>”。

Answer 7

Quick 2021 update:

RFDa:

<ol vocab="https://schema.org/" typeof="BreadcrumbList">
 <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/dresses">
     <span property="name">Dresses</span></a>
     <meta property="position" content="1">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/dresses/real">
    <span property="name">Real Dresses</span></a>
    <meta property="position" content="2">
  </li>
</ol>

Microdata:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

This examples are taken from https://schema.org/BreadcrumbList

As stated on http://data-vocabulary.org :

Since June 2011, several major search engines have been collaborating on a new common data vocabulary called Schema.org

Answer 8

Take a look at: https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html

You can combine with schema.org ( suggested by @SCabralO ) if wanted but keep the attributes from this example. Make it perfect but simple;)