header是页面或区块头部容器，nav专指主导航链接集合；article须独立可分发；section需带标题才具语义；正确语义标签提升SEO与无障碍访问。
header 和 nav 别混着用，语义错位会导致 SEO 和屏幕阅读器误读
header 是「页面或区块的头部内容容器」，不是「网站顶部导航栏专用标签」；nav 才专指「主导航链接集合」。常见错误是把整个顶部栏（logo + 搜索框 + 用户菜单 + 导航条）全塞进一个 header 里却不拆出 nav，这会让辅助技术无法识别可跳转的导航区域。
正确做法是：
- 每个独立内容区块（如文章、侧边栏）可以有自己的
header，不只限于页面最上方 - 只要是一组用于站点内跳转的链接（比如顶部主菜单、页脚分类链接），就该用
nav包裹，哪怕它在header内部 -
header里可以没有nav（比如纯标题+副标题），nav也可以不在header里（比如底部导航）
article 必须能独立分发，别把广告位或通用侧边栏塞进去
article 表示「可独立存在、可被单独订阅或重用的内容」，典型例子是博客正文、新闻稿、论坛帖子。它的核心判断标准是：把这段 HTML 单独拿出来，贴到另一个网站或 RSS 阅读器里，是否仍有完整意义？
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
article包裹整页布局（如首页所有栏目），违反「独立性」原则 - 在
article内硬塞aside广告位，但广告本身不属于该文章内容——应把广告移出article，或改用section+div - 列表页（如「最新 10 篇文章」）中，每个条目用
article，但整个列表本身用main或section，而非再套一层article
嵌套要讲逻辑层级，section 不是 div 的语义马甲
section 表示「有主题的文档区块」，必须带标题（h1–h6），否则语义失效。它不是为了替代 div 而生的「高级容器」，没标题就该用 div。
典型结构示例：
<main>
<article>
<header>
<h1>如何用 fetch 发起 POST 请求</h1>
<p>发布于 2024-03-15</p>
</header>
<section>
<h2>基础用法</h2>
<p>需要设置 body 和 headers...</p>
</section>
<section>
<h2>常见错误</h2>
<p>忘记 stringfy 数据会报 400...</p>
</section>
</article>
</main>
注意：section 的 h2 是它自己的标题，不是 article 的子标题——它们共同构成文档大纲（outline），浏览器和读屏软件靠这个生成导航树。
兼容性不用怕，但 aria-label 和 role 要补在关键位置
所有主流浏览器都支持 header、nav、article、section，IE9+ 也基本可用。真正影响体验的是语义缺失后的降级行为：比如老版本读屏器可能忽略 nav，但加上 role="navigation" 就能识别。
实操建议：
-
nav标签默认已带role="navigation"，无需重复写；但如果你用div模拟导航（不推荐），就必须手动加 -
article对应role="article"，同样内置，不用额外加 - 如果某个
section主题不够明确（比如「相关推荐」模块），建议加aria-label="相关文章"辅助说明
语义标签的价值不在视觉，而在 DOM 结构的可解析性——写对了，调试时看 Elements 面板就能一眼看出内容骨架，而不是满屏 div 套娃。
