探索面包屑的标记

在我最近关于 CSS 三角形面包屑 的文章的评论中，我用来创建它们的 HTML 标记（本质上）是

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

Geert van der Heide 评论

… 该 HTML 不是语义化的。 将面包屑编码为无序列表，会让人感觉项目处于同一层次结构级别，就像是一行中的项目集一样。 面包屑中的项目并非如此，它们代表一条路径，每个链接都是最后一个链接的“子级”。

我认为这是一个很好的观点。 从语义上讲，无序列表确实感觉不对。 正如 Geert 所说，它将它们全部放在同一层次结构级别上。 要将每个菜单项清晰地放到它自己的级别上，需要像这样标记

<ul class="breadcrumb">
    <li>
      <a href="#">Top Level</a>
      <ul>
        <li>
          <a href="#">Second Level</a>
          <ul>
             <li>
               <a href="#">Third Level</a>
               <ul>
                  <li>
                     Current Item
                 </li>
               </ul>
            </li>
         </ul>
       </li>
     </ul>
  </li>
</ul>

不过，这感觉很压倒性，不是吗？ 我看不出它会有什么用，即使从技术上来说你可以使用它，并且可以根据你的需要以任何方式对其进行样式设置。

不，无序列表的“无序”部分才是更大的问题。 也许我们可以把它改成有序列表

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

这感觉好多了。 面包屑按特定顺序排列，因此使用“有序”列表似乎很合适。 但是，我仍然不完全满意。 仅仅因为列表是 1、2、3 等，并不代表层次结构的层级。

几个人还提到了只使用链接和某种文本视觉分隔符。

<p class="breadcrumb">
  <a href="#">Top Level</a> >
  <a href="#">Second Level</a> >
  <a href="#">Third Level</a> >
  Current Item
</p>

在没有任何 CSS 样式的情况下，这可能是最有效的方式。 > 符号分隔符很好地指示了层次结构。 使用内联元素可以使面包屑像面包屑通常那样具有水平布局。 但是，这仍然不太令人满意，因为标记本身并没有很有意义地描述它包含的内容。

我想我会去看看谷歌是否有关于这个问题的建议。 毕竟，谷歌在其搜索结果中展示了面包屑

不出所料，它们实际搜索结果的标记只是一团乱麻（谷歌任何东西的标记都是一团乱麻）。 然而，他们确实对我们应该如何标记面包屑有一些说明。 他们推荐 HTML5 微数据，并提供以下示例

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">Books</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/books/authors" itemprop="url">
      <span itemprop="title">Authors</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors/stephenking" itemprop="url">
        <span itemprop="title">Stephen King</span>
      </a>
    </div>
  </div>
</div>

乍一看很笨拙，但实际上微数据就是为了这种目的而设计的。 我可能在这里使用 span，而不是 div 包装器。

我不确定微数据和微格式是如何相互关联的，但似乎 微格式建议 只给包装器一个名为“breadcrumb”的类名，然后就完事了。

HTML5 有 更多关于该主题的说明（**参见下面的更新**）在 rel 属性中使用“up”值表示该元素是层次结构的一部分，并且还指示当前文档到引用文档的距离。

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

nav 标签特别合适，上面所有代码示例从语义上来说都应该用它来包裹。 除此之外，这可能是我最满意的示例之一，因为它从语义上描述了面包屑的性质。 rel 标签专门用于描述元素之间的关系，因此非常合适。 此外，从视觉上看，在没有任何样式的情况下，面包屑的外观就实现了。

但**请注意**：rel/up 还没有最终确定，并且可能不会持久。 有一个 开放性问题，它表明使用多个“up”并不是一种非常干净的方式，并且 建议 使用诸如“up2”、“great-grandparent”甚至像 level="3" 这样的新属性正在流行起来。

**更新：** Nelson Menezes 写信告诉我 HTML5 和 rel="up" 已经停止使用。 参考资料：1 2

那么，我们现在处于什么阶段呢？ 我想说还没有一种超级终极的最佳方式来处理面包屑标记。 希望很明显，这真的不是什么大问题。 只需选择一个适合你的方式，然后坚持下去。 我只是认为这是一个关于 HTML 的有趣话题。 如果你有任何关于这里没有展示的面包屑标记的想法，请分享！