Foundation前端框架提供2 ways of representing breadcrumbs在 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>
以这种方式使用
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>
哪种方式在语义上更合适?
最佳答案
使用此 SCHEMA 结构
**
Use this for Microdata for breadcrumber
**
<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>
**
Important: It also used for SEO Purpose in search engine like google,yahoo for displaying efficient in it...
**
enter link description here
关于semantics - ul 或 nav 用于 HTML 中的面包屑导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16656649/