nav 标签不专用于面包屑导航，需结合 aria-label=”breadcrumb”、ol 列表结构、aria-current=”page” 及 json-ld 结构化数据实现语义化、可访问与 seo 友好。
nav 标签本身并不专门支持面包屑导航，它只是语义化地表示“导航区块”。面包屑（Breadcrumb）属于一种特定类型的导航，但 html5 规范中并未为它定义专属标签，因此需结合语义化结构、ARIA 属性与 CSS 共同实现良好的结构化支持。
用 nav 包裹面包屑，但需明确其类型
虽然 nav 可用于包裹面包屑，但必须通过 aria-label=”Breadcrumb” 或 aria-labelledby 明确其功能，避免被屏幕阅读器误判为主导航：
- ✅ 正确写法：
<nav aria-label="Breadcrumb"><ol> <li>首页</li> <li>分类</li> <li>当前页</li> </ol></nav> - ❌ 避免裸用：
<nav><div>首页 > 分类 > 当前页</div></nav>（缺乏语义、不可访问、无层级结构）
优先使用有序列表（ol）构建面包屑结构
面包屑本质是线性、有顺序的路径，ol 比 div 或 span 更符合语义和可访问性要求：
- 每个 li 代表路径中的一个层级，天然支持阅读器按序播报
- 链接（a）放在 li 内部，末级通常不带链接并加 aria-current=”page”
- 示例：
<li><a href="/">首页</a></li> <li><a href="/cat/">产品分类</a></li> <li aria-current="page">无线耳机</li>
配合 ARIA 增强可访问性与机器理解
仅靠 HTML 结构不足以让辅助技术准确识别面包屑意图，需补充关键 ARIA 属性：
立即学习“前端免费学习笔记（深入）”；
- aria-label=”Breadcrumb”：直接声明导航类型，适用于无可见标题的场景
- aria-current=”page”：标记当前页面位置，屏幕阅读器会读作“无线耳机 当前页面”
- 避免使用 role=”navigation” 重复声明——nav 已隐含该 role，冗余可能引发兼容问题
SEO 与结构化数据的协同支持
搜索引擎（如 Google）依赖清晰的 HTML 结构和 Schema.org 标记识别面包屑。nav + ol 是良好基础，但需额外添加 JSON-LD：
- 在页面 head 中嵌入 BreadcrumbList 结构化数据
- 确保 JSON-LD 中的 itemListElement 顺序与 HTML 中 ol 的 li 顺序严格一致
- 各层级的 name 应与可视文本完全匹配，避免 SEO 解析偏差