Question

Foundation前端框架在HTML中提供2 ways of representing breadcrumbs：

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

这种方式使用nav和a元素代替ul和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>

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

Answer 1

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

Answer 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，以便在其中显示效率...

**

enter link description here

Answer 3

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>

ul或导航HTML中的面包屑？

3 个答案: