htmlsemanticsbreadcrumbs

What semantic HTML markup should be used to create breadcrumbs?

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

Solution

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