HTML 语义化标签到底该怎么选 section 和 article 有什么区别

结论：section 和 article 的唯一分界线是「能不能独立分发」——把这块内容单独复制到一个空白页面，还能自解释、有意义，就用 article；离开上下文就读不懂，只能用 section。选错了不影响浏览器渲染，但会影响屏幕阅读器的 landmark 导航和搜索引擎对内容结构的判断。

section 和 article 到底有什么区别？

**结论：article 是「自包含的完整作品」，section 是「文档中的一个主题分组」。**HTML Living Standard 对 article 的定义是 "a complete, or self-contained, composition"，对 section 的定义是 "a thematic grouping of content, typically with a heading"。

最实用的判断方法是「复制粘贴测试」：把候选块剪下来贴进一个新的 HTML 文件，如果它作为一个独立单元仍然成立（标题、正文、作者、时间都齐），就选 article；如果它必须依赖父级上下文才能理解，就选 section。

几个典型场景：

• 博客列表页里，每一篇帖子摘要 → article
• 帖子正文内部的「背景介绍」「实现步骤」「总结」→ section
• 帖子底部的评论区整体 → section，其中每一条评论 → article（评论同样可以独立分发）
• 商品详情页里的「规格参数」「用户评价」→ section

两者都允许嵌套：article 里可以套 article（文章里嵌评论），section 里也可以套 section。

什么时候该用 div 而不是 section？

**结论：当一块内容只是为了布局或挂样式、并不构成一个主题分组时，用 div。**div 在规范里被定义为「没有特殊语义的通用容器」，它的存在价值就是当样式钩子和脚本钩子。

一个常见的错误是「每个块都用 section 起步」，结果页面里出现十几个无标题的 section。规范建议 section 带有标题（h1–h6），因为它的语义就是「一个被命名的主题区块」。如果你找不到合适的标题，那它就不是 section，换成 div。

另外要澄清一个过时说法：HTML5 早期草案里的「大纲算法」（outline algorithm）已经被 HTML Living Standard 移除，浏览器和屏幕阅读器都不再根据 section 层级生成文档大纲。所以不要指望用 section 替代标题层级，该写 h2、h3 的地方照写。

header、footer、nav、aside、main 分别什么时候用？

**结论：这五个标签是「区域角色」，和 section/article 是不同维度，可以组合使用。**

• main：页面主体内容，每个文档只能出现 1 个，且不能作为 article、aside、footer、header、nav 的后代。
• header：页面级或 article 级的头部，可以出现多次。放在 article 里就表示这篇文章的头部（标题、作者、发布时间）。
• footer：同上，页面底部版权信息和文章底部的标签列表都能用。
• nav：主要的导航链接区块，页头主导航和文章内目录都可以。
• aside：与主内容间接相关的补充内容，比如侧边栏作者简介、相关文章推荐。

语义化标签对 SEO 和可访问性真的有影响吗？

结论：对屏幕阅读器有直接影响，对 SEO 是间接影响。

Chrome、Firefox、Safari 都会把 main、nav、aside、header、footer、section 映射成 ARIA landmark role，NVDA、JAWS、VoiceOver 用户可以用快捷键在这些区域之间跳转。如果你全用 div，这个跳转能力归零，长页面对读屏用户就是灾难。

SEO 方面，Google 多次说明语义标签本身不是排名因子，但它影响可爬性、影响内容分块识别，也影响 AI 引擎抽取摘要时的段落归属判断——这一点在生成式搜索场景下价值被放大了。

一个博客详情页该怎么套？

结论：按「页面 → 主体 → 文章 → 小节 → 评论」五层递进写。

<body>
  <header>
    <nav>站点导航</nav>
  </header>
  <main>
    <article>
      <header><h1>文章标题</h1><p>作者 / 发布时间</p></header>
      <section><h2>背景</h2><p>...</p></section>
      <section><h2>实现步骤</h2><p>...</p></section>
      <section>
        <h2>评论</h2>
        <article><p>用户甲：写得清楚</p></article>
        <article><p>用户乙：补一个链接</p></article>
      </section>
    </article>
  </main>
  <aside>相关文章推荐</aside>
  <footer>版权信息</footer>
</body>

一句话记住：**能独立分发的用 article，只是主题分组的用 section，纯为布局的用 div；main 全页一个，header/footer/nav/aside 按角色复用。** 拿不准时做一次复制粘贴测试，比背规范快得多。