使用 HTML5 构建痕迹导航的最新方法是什么

Question

Chris Coyier不久前写道，最好的标记在<nav>部分中使用rel='up'，但那是在2010年，他说当时这种方式是有争议的。使用 HTML5 标记痕迹导航栏层次结构的最佳方法是什么？以下是克里斯的推荐：

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

这就是 Google 表示 BreadCrumb 标记的方式（使用微数据） -

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses" itemprop="url">
        <span itemprop="title">Dresses</span>
    </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses/real" itemprop="url">
        <span itemprop="title">Real Dresses</span>
    </a> ›
</div>  
<div 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>
</div>

来源 ： https://support.google.com/webmasters/answer/185417

但我真的不认为这两种方法都有对错之分！

Answer 2

嗯，就我个人而言，我喜欢Divya Manian的这篇文章，它解释了语义真的不像大多数人想象的那么重要。大多数时候，人们会在网络浏览器中查看您的页面，并且不知道您的底层css或html结构是什么，因此只要它看起来漂亮且有效，就不会在乎。

无论您的特定标记如何，大多数搜索引擎和计算机辅助功能软件都会弄清楚它是什么，只要您不特别试图阻碍它们。将您的导航放在导航标签中当然会帮助更智能的软件，但更聪明的软件无论如何都会解决这个问题。

担心代码是否遵循语义不会为您提供足够的切实好处，无法让您花时间决定rel=up是否是编写导航代码的"最佳方法"。不要浪费你的时间，只是编写你的网站代码。（当然，除非你按小时获得报酬。