语义正确优先选 ，因其准确表达面包屑从根到当前页的不可互换层级序列；外层用 包裹，内部 中当前页须用 标注。

面包屑导航用

还是

？

语义正确优先选

，不是因为“有顺序”，而是因为面包屑本质是层级路径的线性序列——从根到当前页，每级不可互换。

适合主导航、侧边栏等跳转集合，放面包屑反而弱化了结构含义。W3C 示例和主流 CMS（如 wordPress 的 Yoast seo）默认都用

。

实操建议：

• 外层用


  包裹，提供辅助技术可读性

• 内部用

  ，每个

• 放一个链接或当前页（当前页不用 ）
• 避免套用

  或

  ，否则屏幕阅读器可能读作“列表项，共 N 项”，但丢失“第1项→第2项→第N项”的路径感

  aria-current="page" 必须加在当前页节点上

  不加这个属性，视障用户无法区分“这是终点”还是“又一个可点击的中间节点”。很多开发者只写 html 结构，漏掉这个 ARIA 标记，导致导航逻辑断裂。

  常见错误现象：

  立即学习“前端免费学习笔记（深入）”；

  • 屏幕阅读器把当前页读成“首页 / 产品 / 详情”，全部带“链接”提示音
  • 键盘 Tab 焦点仍能落到当前页文字上（因它被误当 ）

  正确写法示例：

  css 布局：用 display: flex 而非浮动或 inline-block

  旧式写法用 Float: left 或 display: inline-block 加负 margin 拼分隔符，容易塌陷、换行错乱，且响应式下难以控制间距一致性。

  现代推荐方案：

  • 给

    设 display: flex; flex-wrap: wrap;

  • 每个
  • 设 margin-right: 0.75rem;，再用 ::after 伪元素在非末项后加 /
  • 当前页节点（aria-current="page"）加 font-weight: bold; 或 color: #333; 视觉强化
  • 移动端可设 flex-direction: column 配合媒体查询，避免过长折行

  动态生成时注意 URL 和文本的同步更新

  服务端渲染（如 php/Node.js）或前端 js（react/vue）生成面包屑时，最容易出问题的是路径与文案不一致。例如 URL 是 /blog/react-props，但显示为“技术文章 > React 入门”，中间缺了一级“Props 概念”。

  关键检查点：

  • 每级 的路径必须真实可访问，不能是占位符（如 # 或 javascript:void(0)）
  • 当前页节点的文本必须与页面
    

    或 严格一致，否则 SEO 和可访问性双输

  • 若使用 javascript 动态注入，确保 dom 更新后触发 aria-live 区域通知（尤其单页应用）

  层级深、路径含参数或国际化站点要格外小心——比如 /en/products?id=123 和 /zh/产品?id=123 必须各自维护对应语言的面包屑文案，不能靠 URL 截取硬翻译。

  发表于：php框架

  2026-01-27

  # column# css# display# dom# flex# Float# href# html# html5# java# javascript# js# li# margin# node.js# php# react# seo# ul# void# vue# word# wordpress# 伪元素# 前端

  复制链接