应该使用什么有意义的 HTML 标签来创建面包屑？我有一个使用未排序列表创建的菜单栏，因为它是一个列表：
<ul id="navigation">
<li><%= Html.ActionLink("Home", "Index", "Home") %></li>
<li><%= Html.ActionLink("Contacts", "Index", "Contacts") %></li>
</ul>
现在，我决定在菜单下方放置一个面包屑，问题是，我不知道应该使用什么标签。我想尽可能使用有意义的标签。请帮助我...
标记面包屑的方法有很多。一个清单就好了。有序列表更适合面包屑，因为它是按特定顺序排列的链接列表。
如果您不想使用列表，您可以将它们作为一组链接保留在
divnav最后，HTML5 规范 建议使用
p旧帖子，但在搜索中排名很高，我认为自从最初提出这个问题以来，事情已经发生了一些变化。
在 html5 网站中，我会使用导航标签，因为从技术上讲，面包屑是在网站中导航的。如果您想更清楚地了解它们是什么，您可以添加微数据来表明它们是面包屑。
来自 Google 的示例和 html5doctor
<nav>
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a>
</li>
<li 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>
</li>
</ul>
如果您不想使用有序列表或段落标签，则始终可以使用嵌套列表来在语义上表示面包屑的层次结构性质。
以下示例来自 Mark Newhouse 的 List Apart 文章，题为“CSS 设计：驯服列表”。
<div id="bread">
<ul>
<li class="first">Home
<ul>
<li>» Products
<ul>
<li>» Computers
<ul>
<li>» Software</li>
</ul>
</li>
</ul></li>
</ul></li>
</ul>
</div>
2021 年快速更新：
射频达：
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://example.com/dresses">
<span property="name">Dresses</span></a>
<meta property="position" content="1">
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://example.com/dresses/real">
<span property="name">Real Dresses</span></a>
<meta property="position" content="2">
</li>
</ol>
微观数据：
<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>
此示例取自https://schema.org/BreadcrumbList
如http://data-vocabulary.org所述：
自 2011 年 6 月以来，几个主要搜索引擎一直在合作开发一个名为 Schema.org 的新通用数据词汇表
对我来说，使用无序列表作为面包屑似乎完全合理；每个应用程序特定结构并不总是有一个命名标签，而且您毕竟显示的是面包屑列表。
您可以使用 css 使面包屑按照您想要的方式显示。
要创建面包屑，您可以使用以下方式：（如果您使用的是 html5，您应该使用 nav 作为包装器来告诉机器人有一些内部链接）
<nav>
<ol class="breadcrumb">
<li><a href="#">Top Level</a></li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Third Level</a></li>
<li>Current Item</li>
</ol>
</nav>
<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>
看看：https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
如果需要，您可以与 schema.org 结合（由 @SCabralO 建议），但保留本示例中的属性。让它完美但简单;)
始终查看 Jacob Nielsen：他自 2003 年以来一直推荐“>”。
W3C 的 Web Accessibility Initiative (WAI) 发布的《ARIA 创作实践指南》建议在
<ol><nav><nav aria-label="Breadcrumb">
<ol>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/posts">Posts</a>
</li>
<li>
<a href="/posts/how-to-mark-up-breadcrumbs" aria-current="page">
How to mark up breadcrumbs
</a>
</li>
</ol>
</nav>