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

Posted

技术标签:

【中文标题】使用 HTML5 构建面包屑导航的最新方法是啥【英文标题】:What's The Most Current Way To Structure Breadcrumb Navigation Using HTML5使用 HTML5 构建面包屑导航的最新方法是什么 【发布时间】:2012-06-07 17:09:24 【问题描述】:

Chris Coyier wrote a while ago 最好的标记在<nav> 部分中使用rel='up',但那是在2010 年,他说这种方式当时有争议。使用 html5 为面包屑导航栏标记层次结构的最佳方法是什么?这是 Chris 的推荐:

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

【问题讨论】:

【参考方案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

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

【讨论】:

【参考方案2】:

嗯,就个人而言,我喜欢 Divya Manian 的 this article,它解释了语义实际上并不像大多数人认为的那样重要。大多数时候,人们会在网络浏览器中查看您的页面,并且不知道您的底层 css 或 html 结构是什么,因此只要它看起来漂亮且有效,就不会在意。

大多数搜索引擎和计算机辅助功能软件都会弄清楚它是什么,而不管您的具体标记是什么,只要您不专门试图阻止它们。将您的导航放在导航标签中当然会帮助更智能的软件,但更智能的软件无论如何都会解决它。

担心您的代码是否遵循语义不会为您提供足够的实际好处,因此值得您花时间来决定 rel=up 是否是编写导航代码的“最佳方式”。不要浪费您的时间,只需编写您的网站。 (当然,除非你是按小时计酬的。)

【讨论】:

以上是关于使用 HTML5 构建面包屑导航的最新方法是啥的主要内容,如果未能解决你的问题,请参考以下文章

php Enfold使用高级自定义字段构建父导航面包屑

前端特效制作 | CSS3圆形风格面包屑导航

如何使用面包屑导航组件

什么是面包屑导航?

intellij idea 面包屑导航 默认展示

elementui面包屑动态生成