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

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>