HTML语义化标签须精准匹配用途：main仅包裹核心内容，不可含nav/aside；header/footer按内容单元层级使用；nav仅用于主导航；section必须带标题且具独立主题；time需datetime属性，figure须配figcaption。
HTML语义化标签不是“能用就行”，而是“该用哪个、在哪用、为什么不能乱套”——错用比不用更糟。
为什么只能有一个，且不能包导航和侧边栏
因为 main 是给机器（屏幕阅读器、搜索引擎）指路的：它声明“这里开始才是用户真正要读/操作的内容”。一旦里面塞了 nav、aside 或页脚链接，辅助工具会误判主内容边界，导致跳过正文或重复朗读无关模块。
- 正确做法：
main只包裹文章正文、产品详情、表单主体等不可剥离的核心区块 - 常见错误：
<main><nav>...</nav><article>...</article></main>—— 导航必须在main外层 - 兼容性提示：部分旧版 Safari 对嵌套
main会静默忽略，务必用浏览器开发者工具的“无障碍树”检查是否被识别
和
header 和 footer 不是页面顶部/底部专属，而是“某个内容单元”的头部或尾部。比如一篇博客文章内部也可以有自己的 header（含标题+作者+发布时间），一个 section 下也能配独立 footer（如“本节参考资料”）。
- 全局
header应是body的直接子元素，含 logo、主导航、搜索框 - 文章级
header必须嵌在article或section内，否则语义断裂（删掉外层后，它就变成无主的“头”） - 避免把广告横幅、随机按钮塞进
footer：它只承载与当前内容单元强相关的收尾信息
nav 的核心判断标准是：用户是否靠它完成跨区域跳转？如果是“上一篇/下一篇”“相关文章”“页脚一堆友情链接”，它们不构成主导航体系，用 div + 类名更准确。
立即学习“前端免费学习笔记（深入）”；
- 必须用
nav的场景：顶部水平菜单、左侧垂直菜单、响应式汉堡菜单展开的内容 - 不该用
nav的典型错误：<footer><nav><a>关于我们</a><a>隐私政策</a></nav></footer>—— 这属于页脚元信息，用footer直接包a即可 - 性能提醒：某些屏幕阅读器对
nav区域做特殊缓存，滥用会导致导航快捷键（如 NVDA 的 N 键）失效或卡顿
必须带标题，没标题就别硬套
section 不是视觉分隔符，而是“有明确主题的逻辑分组”。删掉周围其他内容后，这块还能不能被独立理解？不能，就说明它只是样式容器，该用 div。
- 正确用法：
<section><h2>前端工具链</h2><p>Vite、ESBuild…</p></section> - 错误信号：只有
<section><div class="card">...</div></section>，没h2–h6标题，也没上下文支撑其为“一节” - SEO影响：Google 明确表示，带标题的
section更容易被识别为结构化内容块，参与富摘要生成；空section则被降权为普通 div
最容易被忽略的其实是时间标记——time 标签不光是写“2026年8月”，必须带 datetime 属性，否则对机器毫无意义。还有 figure 和 figcaption 的父子关系，漏掉任一环，图文语义就断了。
