哪些 HTML5 语义标签在实际项目中必须用

这些标签已被所有现代浏览器（包括 Edge 12+、Chrome 10+、Firefox 4+、Safari 5.1+）原生支持，无需 polyfill，且具备真实语义价值：

• ：仅用于页面或区块的**顶部引导内容**（如 logo、主导航），不是所有顶部

  都该换；嵌套时注意层级，避免在
• ：每个页面**有且仅有一个**，代表核心内容区域；不能出现在

  或
• ：表示**独立可分发的内容单元**（如博客文章、新闻条目、论坛帖子），自带隐式 sectioning root，影响大纲生成
• ：按主题组织内容的通用区块，**必须有标题**（

  –

  ），否则语义失效；别把它当“高级

  ”用

哪些“HTML5 标签”其实不该乱用

部分新增标签虽合法，但语义窄、兼容场景少，或已被实践证明容易误用：

• +

• ：必须带 datetime 属性才有效（如 5月12日），否则只是普通内联文本，对机器无意义
• ：表示**上下文中的高亮引用**（如搜索结果中关键词），不是视觉加黄工具；滥用会导致无障碍体验混乱（屏幕阅读器会读出 “highlighted”）

HTML4 到 HTML5 的语义断层在哪

关键不在“多了什么标签”，而在**大纲算法（document outline）逻辑的根本变化**：

• HTML4 完全依赖

  –

  的显式层级构建文档结构；

  对大纲无贡献

• HTML5 引入**隐式节（sectioning content）**：所有
  、

  、
• 但现实是：主流浏览器从未完整实现 HTML5 大纲算法（仅 Safari 有限支持），开发者仍需靠

  –

  保证可访问性；所以正确做法是——既用语义标签划分区块，又用合理

  –

  维持显式层级

验证语义是否真起作用的实操方法

别只看源码有没有标签，要验证机器是否能正确解析：

• 用 Chrome DevTools → **Accessibility 面板**查看“Landmarks”和“Heading levels”，确认
• 用 NVDA 或 VoiceOver 开启屏幕阅读器，按 Insert+F7（NVDA）调出元素列表，检查是否出现正确的地标（landmark）和标题树
• 运行 W3C Nu Validator，输入 URL 或粘贴 HTML，它会报出
  重复、

  缺标题等真实语义错误
• 在终端执行：

  curl -s "https://your-site.com" | grep -E "(header|nav|main|article|section|aside|footer)" | head -10

  快速确认基础语义标签是否已落地

语义标签的价值不在“用了新语法”，而在于让内容结构可被机器稳定提取。最常被忽略的一点：即使写了