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

最好的标记是在

部分使用

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>

>
>
>
二手货

就我个人而言，我喜欢Divya Manian的作品，它解释了语义并不像大多数人想象的那样重要。大多数情况下，人们会在web浏览器中查看您的页面，并且不知道您的底层css或html结构是什么，因此，只要它看起来漂亮并且工作正常，就不会在意

大多数搜索引擎和计算机辅助功能软件都会找出它是什么，而不管您的特定标记是什么，只要您不特别试图阻止它们。把你的导航放在导航标签上当然会有助于更智能的软件，但更智能的软件无论如何都会找到答案

---

担心您的代码是否遵循语义将不会为您提供足够的实际好处，让您花时间来决定

rel=up

是否是编写导航代码的“最佳方式”。不要浪费时间，只需编写网站代码。（当然，除非你是按小时计酬的。）

这就是谷歌如何表示面包屑的标记（使用微数据）——

›
›

资料来源：

但我并不认为这两种方法都是对的或错的

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