4

Foundation 前端框架提供了两种在 HTML 中表示面包屑的方式：

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>

这种方式使用navanda元素而不是uland li：

<nav class="breadcrumbs">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a class="unavailable" href="#">Gene Splicing</a>
  <a class="current" href="#">Cloning</a>
</nav>

哪种方式在语义上更合适？

4

3 回答 3

2

使用此 SCHEMA 结构

**

将此用于面包屑的微数据

**

<div class="breadcrumbs">
  <ul>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
      <a href="index.html" title="Go to Home Page" itemprop="url">
        <span itemprop="title">Home</span>
      </a>
      <span>></span>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
      <a href="product.html" title="Product" itemprop="url">
        <span itemprop="title">product name</span>
      </a>
      <span>></span>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
      <a href=".finalproduct.html" title="final product" itemprop="url">
        <span itemprop="title">final product</span>
      </a>
      <span>></span>
    </li>
    <li class="category6"><strong>Final Product view</strong></li>
  </ul>
</div>

**

重要提示：它还用于搜索引擎（如 google、yahoo）中的SEO 目的，以在其中显示高效...

**

在此处输入链接描述

于 2015-06-10T05:07:17.480 回答
0

碎屑用于标记，因此它们是标记而不是列表项。因此从语义的角度来看，第二种方式是正确的方式。


== 2021-08-26 更新 ==

请注意 Schema.org建议使用有序列表。我曾经和一个了解可访问性的人讨论过这个事情，我被告知屏幕阅读器在访问列表时会宣布列表项的数量，因此在这种情况下使用列表对于屏幕阅读器用户了解面包屑数量很有用面包屑导航了。

于 2013-05-22T10:17:42.740 回答
0

schema.org 建议使用以下方案https://schema.org/BreadcrumbList

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>
于 2021-03-26T08:10:13.787 回答