What semantic HTML markup should be used to create

问题:

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

回答1:

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>

回答2:

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.

回答3:

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>

回答4:

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.

回答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>
   

回答6:

always checkout Jacob Nielsen: He has recommended the ">" since 2003.