Question

Chris Coyier wrote a while ago最佳标记在rel='up'部分中使用<nav>，但那是在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标记的方式（使用Microdata） -

<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的this article，这解释说语义真的没有大多数人想象的那么重要。大多数情况下，人们会在Web浏览器中查看您的页面，并且不知道您的底层css或html结构是什么，因此只要看起来漂亮且有效，就不会那么在乎。

大多数搜索引擎和计算机辅助功能软件都会弄清楚它是什么，无论您的具体标记如何，只要您没有特别设法阻止它们。将导航放在导航标签中当然会帮助智能软件，但更智能的软件无论如何都会想出来。

担心您的代码是否遵循语义将无法为您提供足够的实际好处，使您值得花时间来确定rel=up是否是编制导航代码的“最佳方式”。不要浪费你的时间，只需编码你的网站。（当然，除非您按小时获得报酬。）

什么是使用HTML5构建面包屑导航的最新方法

2 个答案: