Question

应该使用哪些有意义的HTML标记来创建面包屑？我有一个菜单栏，使用未排序的列表创建，因为它是一个列表：

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

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

Answer 1

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

如果您不想使用列表，则可以将它们保留为div中的一组链接。虽然如果您使用的是HTML5，但您可能希望将它们放在nav元素中。

最后，HTML5 spec建议使用p元素，因为它们可以被视为关于如何到达特定页面的方向段。

Answer 2

老帖子但在搜索中出现了很高，我认为事情已经发生了一些变化，因为这个问题最初被问到了。

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

来自Googles示例和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

对你的面包屑使用无序列表似乎对我来说是完全合理的;对于每个特定于应用程序的结构，并不总是有一个命名标记，并且您正在显示一个面包屑列表。

您可以使用css使面包屑以您想要的方式显示。

Answer 4

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

以下示例来自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 5

要创建面包屑，可以使用以下方法：（如果使用的是html5，则应使用nav作为包装器来告诉bot有一些内部链接）

Matthew Rankin的答案描述了这一点。

使用ol列表的第二种方法，而不是下面的第一种方法，告诉bot项目之间存在顺序：

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

第三种方式是使用p标签并依赖于链接（依赖关系不是最终的！）

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

Answer 6

总是结账Jacob Nielsen：他推荐了“＆gt;”自2003年以来。

Answer 7

2021 年快速更新：

射频识别：

<ol vocab="https://schema.org/" typeof="BreadcrumbList">
 <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/dresses">
     <span property="name">Dresses</span></a>
     <meta property="position" content="1">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/dresses/real">
    <span property="name">Real Dresses</span></a>
    <meta property="position" content="2">
  </li>
</ol>

微数据：

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

此示例取自https://schema.org/BreadcrumbList

如http://data-vocabulary.org所述：

<块引用>

自 2011 年 6 月以来，几个主要的搜索引擎一直在合作开发一个名为 Schema.org 的新通用数据词汇表

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

7 个答案: