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

Wil*_*itz 7 markup html5 breadcrumbs semantics

Chris Coyier不久前写过,最好的标记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>
Run Code Online (Sandbox Code Playgroud)

Pan*_*har 1

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

\n\n
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">\n    <a href="http://www.example.com/dresses" itemprop="url">\n        <span itemprop="title">Dresses</span>\n    </a> \xe2\x80\xba\n</div>  \n<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">\n    <a href="http://www.example.com/dresses/real" itemprop="url">\n        <span itemprop="title">Real Dresses</span>\n    </a> \xe2\x80\xba\n</div>  \n<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">\n    <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">\n        <span itemprop="title">Real Green Dresses</span>\n    </a>\n</div>\n
Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n

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

\n