语义化 section/article

结论：<section> 是「有主题的内容分组」，<article> 是「能脱离上下文独立成立的完整内容单元」。一句话判断法——能单独塞进 RSS 或另一个页面发出去还讲得通的，用 <article>；只是给当前页面分章节的，用 <section>；两者都不满足的，用 <div>。

section 和 article 到底有什么区别？

结论：<article> 强调「自包含」，<section> 强调「主题分组」，判定的关键是内容能否独立分发。

WHATWG HTML 规范对 <article> 的定义是「一个自包含的组合，原则上可以在不依赖页面其余内容的情况下被独立分发或复用」，典型例子是论坛帖子、杂志文章、博客评论、可独立使用的卡片组件。对 <section> 的定义则是「文档或应用中的一个主题性内容分组，通常带一个标题」。

两者的一个硬性差异是标题要求。规范明确鼓励 <article> 的第一个子元素是 <h1>–<h6>，因为这个单元的标题本身就是它独立存在时的标题。而 <section> 一旦没有标题，就退化成了普通容器，此时它跟 <div> 的区别只剩一个空壳标签。

怎么判断该用哪个？三个可执行的判断步骤

结论：按「能否独立分发 → 能否写出自然标题 → 都不行就用 div」三步走，可以覆盖 90% 的纠结场景。

第 1 步，问自己这段内容能不能单独发出去。一篇博客正文、一条评论、一张商品卡、一个用户在列表里的动态——能，用 <article>。首页的「公司简介」区块、「联系方式」区块——不能，它们离开当前页面就没有意义。

第 2 步，如果不能独立分发，试着给它写一个标题。写得出「产品特性」「常见问题」「定价方案」这种自然标题，用 <section>；写不出来、纯粹是为了套一层做布局，用 <div>。

第 3 步，检查层级。<section> 应该出现在 <main> 之下，而不是随手包在 <button> 或 <li> 外面。一个 <section> 里可以有多个 <article>（比如「最新文章」区块里放 10 篇 <article>），一个 <article> 里也可以有多个 <section>（一篇长文按「背景 / 方案 / 结论」分节）。

article 可以嵌套吗？评论区怎么写？

结论：可以，而且嵌套 <article> 是官方认可的用法。

规范给出的示例就是：一篇博客文章是外层 <article>，下面每条读者评论是内层 <article>。嵌套时要注意，内层 <article> 的语义是「相对外层独立的一部分」，所以评论必须是完整的独立单元，而不是半句话的回复片段。

典型结构：

<article>
  <h1>语义化标签怎么选</h1>
  <section>
    <h2>section 与 article 的区别</h2>
    <p>...</p>
  </section>
  <section>
    <h2>评论</h2>
    <article>
      <h3>用户 A 的评论</h3>
      <p>...</p>
    </article>
  </section>
</article>

注意最后那个把评论包起来的 <section>：它给评论区一个标题，也让内层 <article> 有明确归属。

section、article 和 div 有什么区别？用错了会有代价吗？

结论：用错不会破坏页面显示，但会污染无障碍树，让屏幕阅读器用户听到错误的导航结构。

浏览器对 <section>、<article>、<div> 的默认 display 都是 block，视觉上零差别。真正有差别的是 ARIA 映射：按 HTML-AAM 规范，<article> 映射为 role="article"；<section> 只有在拥有可访问名称（aria-label、aria-labelledby，或由标题间接提供）时才映射为 role="region"，成为可跳转的 landmark，否则映射为 role="generic"，等于一个 <div>。

也就是说，一个没有标题也没有 aria-label 的 <section>，对辅助技术来说就是透明的，除了让 HTML 变长没有任何收益。这不叫语义化，这叫给标签凑数。

另一个常见误解是「多个 <h1> 会自动形成文档大纲」。HTML5 曾提出的大纲算法（outline algorithm）从未被主流浏览器实现，并且已经从 WHATWG 规范中移除。所以标题层级要靠你自己维护：一个页面一个 <h1>，往下依次用 <h2>、<h3>，不要指望 <section> 自动帮你算。

语义化标签对 SEO 有直接加分吗？

结论：<article>、<section> 不是排名信号，Google 官方从未把这两个标签列为排名因子；它们影响的是内容可解析性和无障碍体验。

能带来实际收益的是间接效果：结构清晰的标题层级帮助搜索引擎识别页面主题，也为 AI 引擎抽取正文提供了明确边界；landmark 结构让屏幕阅读器用户能一键跳到主内容。把精力放在标题语义和内容质量上，比纠结用 <section> 还是 <div> 更划算。

收尾：记住三条就够——能独立分发用 <article>，能写出标题用 <section>，写不出标题就用 <div>。再补一条：<section> 没有标题或 aria-label 时等于 <div>，不要为了「看起来语义化」而堆标签。