What kind of semantic markup should be used to create breadcrumbs?

Question

What significant HTML tag should I use to create breadcrumbs? I have a menu bar that is created using an unsorted list, since this 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 the breadcrumbs under the menu, the problem is that I do not know which tag I should use. As much as possible, I want to use meaningful tags. Please help me...

Answer 1

If you do not want to use an ordered list or paragraph tags, you can always use a nested list to semantically represent the hierarchical nature of breadcrumbs.

The following example is presented by Mark Newhouse 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 2

There are many ways to mark breadcrumbs. The list is in order. An ordered list is more suitable for crackers because it is a list of links in a specific order.

If you do not want to use a list, you can leave them as a set of links in a div . Although, if you use HTML5, you can put them in the nav element.

Finally, the HTML5 specification suggests using the p element, because they can be read as a paragraph of directions on how to get to a particular page.

Answer 3

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

On the html5 site, I would use the nav tag, since breadcrumbs are technical site navigation. If you want to make it even clearer what it is, you can add microdata to claim that it is breadcrumbs.

From the Googles and html5doctor example

 <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 4

Using an unordered list for your crackers seems perfectly reasonable to me; There is not always a named tag for each specific application structure, and you display a list of breadcrumbs after.

You can use css so that the breadcrumbs are displayed as you would like.

Answer 5

always check Jacob Nielsen: he has recommended a ">" since 2003.

Answer 6

you can use the following methods to create breadcrumbs: (you should use nav as a shell to tell bots about internal links if you use html5)

1. Matthew Rankin's answer describes this.
2. the second way, using the ol list instead of the first, as shown below, to indicate to the bot the order between the elements:

    <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. The third way is to use the p and rel up tag 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>