应该使用什么语义HTML标记来创建面包屑？

Question

应该使用什么有意义的HTML标签来创建面包屑？我有一个使用未排序列表创建的菜单栏,因为它是一个列表:

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

现在,我决定在菜单下面放一个面包屑,问题是,我不知道应该使用什么标签.我想尽可能使用有意义的标签.请帮我...

Answer 1

老帖子，但在搜索中排名很高，我认为自从最初提出这个问题以来，事情已经发生了一些变化。

在 html5 网站中，我会使用导航标签，因为从技术上讲，面包屑是通过网站进行导航的。如果您想更清楚地了解它们是什么，您可以添加微数据来表明它们是面包屑。

来自 Google 的示例和 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 2

有很多方法可以标记面包屑.清单很好.有序列表更适合于面包屑,因为它是特定顺序的链接列表.

如果您不想使用列表,则可以将它们保留为一组链接div.虽然如果你使用HTML5,你可能想把它们放在一个nav元素中.

最后,HTML5规范建议使用一个p元素,因为它们可以作为如何到达特定页面的方向段读取.

Answer 3

如果您不想使用有序列表或段落标签，则始终可以使用嵌套列表来在语义上表示面包屑的层次结构性质。

以下示例来自 Mark Newhouse 的A List Apart 文章，题为“CSS 设计：驯服列表”。

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