面包屑导航用于展示用户在当前网站中的位置路径，正确的语义化写法应当让浏览器和无障碍辅助工具都能理解其含义。使用nav元素包裹、ol表示顺序、配合aria-label是最被推荐的做法。
为什么用nav和ol
nav元素可以告诉浏览器这一段属于导航性质的内容，方便屏幕阅读器用户快速跳转到导航区。面包屑本身是一条有先后次序的路径，例如首页、频道、详情，因此用有序列表ol比无序列表ul更贴合语义。
基本结构示例
下面给出一个最小可用的语义化面包屑写法：
<nav aria-label="面包屑导航">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/news">新闻</a></li>
<li>正文详情</li>
</ol>
</nav>
aria-label的作用
页面中可能存在多个nav，例如主导航、侧边导航。如果只写nav不加说明，辅助工具会读作“导航”。通过aria-label属性赋予清晰名称，可以让用户明确这是面包屑区域。
常见取值建议
- 中文站点可用“面包屑导航”或“位置导航”
- 英文环境可用“Breadcrumb”
- 避免留空，否则语义价值下降
需要注意的细节
当前页面一般不需要再包一层链接，可用纯文本表示，如同上面代码中的“正文详情”。若使用微数据或JSON-LD进一步增强SEO，也应保持基础HTML语义不变。
错误写法对照
| 写法 | 问题 |
|---|---|
| 用div加>符号 | 无导航语义，读屏软件无法识别 |
| nav内用ul | 丢失路径顺序含义 |
| nav无aria-label | 多导航时难以区分 |
小结
语义化面包屑并不复杂，记住用nav标明区域、ol表达顺序、aria-label提供名称即可。这样的代码对SEO和无障碍都更友好，也更容易被后续维护者理解。
breadcrumbsemantic_htmlaria_label修改时间：2026-07-29 14:45:18