illegalCreed

中文

English

中文

English

Appearance

article vs section 判定 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • <article> = 自包含、可独立分发 / 复用的单元（拿出去也成立）：博客文章、评论、商品卡、论坛帖
  • <section> = 主题分组：内容相关、属于同一主题的一块，没有更具体语义元素时才用
  • 一句话判定：「这块内容单独拎出去（如被订阅、转载）还讲得通吗？」——讲得通用 article，讲不通看是否「同一主题的一段」用 section
  • <section> 应当带标题（<h1>–<h6>），无标题的 section 几乎没意义（UI 控件组等极少数例外）
  • <article> 也建议带标题标识自己；可嵌套：评论的 <article> 嵌在文章的 <article> 里
  • <section> 默认隐式角色 generic，只有给了无障碍名（aria-label/aria-labelledby）才升级为 region 地标
  • 纯粹只为「套个样式 / 布局」的容器，两个都别用，用 <div>
  • 别把 <section> 当通用容器——规范明确：「section 不是通用容器元素」

一句话先分清 ​

最快的判定标准是问一句：

「把这块内容单独拎出去——比如放进 RSS、被别的站转载、做成一张卡片——它自己还讲得通吗？」

  • 讲得通 → 它是自包含单元 → <article>；
  • 讲不通，但它是「同一主题下的一段」 → <section>；
  • 既不自包含、也不构成主题段落，纯粹是布局 / 样式容器 → <div>（见本页末尾）。

<article>：自包含、可复用 ​

MDN 的定义是：「文档、页面、应用或站点中一个自包含的组成部分，意图能被独立分发或复用（例如用于内容联合 / 订阅）。」一个好用的心智模型是「报纸 / 杂志上的一篇文章」——它可以被剪下来单独阅读，换个版面照样成立。

典型 <article> 场景：

  • 论坛帖子、博客文章、新闻报道；
  • 用户提交的评论；
  • 商品卡片；
  • 一个可独立运行的交互小部件 / 小工具。

每个 <article> 都该被标识，通常是给它一个标题（<h1>–<h6>）作为子元素：

html
<article>
  <h2>Granny Smith 苹果</h2>
  <p>这种青苹果汁多味酸，是做苹果派的绝佳馅料。</p>
</article>

嵌套 article ​

<article> 可以嵌套，内层表示与外层相关的文章。最经典的例子是「文章 + 评论」：每条评论都是一个 <article>，嵌在代表整篇文章的 <article> 里。

html
<article>
  <h2>侏罗纪公园</h2>
  <p>恐龙太棒了！</p>

  <section>
    <h3>用户评论</h3>

    <article>
      <h4>太吓人了！</h4>
      <p>对我来说太恐怖了。</p>
      <footer>
        <p>发表于 <time datetime="2026-05-16">5 月 16 日</time>，作者 Lisa。</p>
      </footer>
    </article>

    <article>
      <h4>爱死恐龙了！</h4>
      <p>同意，恐龙是我的最爱。</p>
      <footer>
        <p>发表于 <time datetime="2026-05-17">5 月 17 日</time>，作者 Tom。</p>
      </footer>
    </article>
  </section>
</article>

注意上面同时示范了两件事：① 评论用嵌套 <article>；② 「用户评论」这一主题块用 <section> 包起来。两者各司其职。

article 里的作者与时间

  • 作者联系信息可放 <address>，但它只代表最近的 <article> / <body>，对嵌套 <article> 不生效（详见 易错语义）；
  • 发布时间用 <time datetime="…">，别塞进 <address>。

<section>：主题分组 ​

MDN 的定义是：「一个通用的独立区段，当没有更具体的语义元素可用时才用它。」规范同时给出一句重要的警告：

「<section> 不是一个通用容器元素。」

也就是说，它不是 <div> 的语义升级版——只有当一块内容构成一个带主题的区段时才用它。

section 几乎总该带标题 ​

这是 <section> 最关键的一条使用规范。MDN 反复强调：

「<section> 应当总是带一个标题，极少数情况例外。」

原因和可访问性直接相关：<section> 默认隐式角色是 generic，对读屏没有特别意义；只有当你给它一个无障碍名（通过 aria-label、aria-labelledby，或一个被关联的标题）时，它才升级为 region 地标、能被读屏当作可跳转的区段。一个没标题、没名字的 <section>，语义上和 <div> 几乎没区别。

html
<!-- 推荐：带标题的 section -->
<section>
  <h2>选购标准</h2>
  <p>挑苹果要考虑很多标准——大小、颜色、硬度、甜度、酸度……</p>
</section>

极少数无标题的 section ​

规范允许的「无标题 section」基本只出现在 Web 应用的 UI 区块里，而不是传统文档结构中。比如一组操作按钮、一段「上一篇 / 下一篇」翻页控件：

html
<section aria-label="文章翻页">
  <a href="#">上一篇</a>
  <a href="#">下一篇</a>
</section>

即便如此，也建议用 aria-label 补一个名。日常内容页里，看到没标题的 <section>，先怀疑是不是该换成别的元素。

一张对照表 + 决策流程 ​

MDN 给出的「该用哪个」对照，浓缩如下：

内容性质该用
自包含、可独立分发 / 订阅（博客帖、评论、新闻、商品卡）<article>
与正文间接相关的旁支（相关链接、作者简介）<aside>
文档的主体内容区<main>
导航菜单<nav>
同一主题下的一段内容（且没有更贴切的语义元素）<section>
纯粹只为套样式 / 布局的包裹<div>

把它变成一条决策流程：

  1. 这块是导航 / 主体 / 旁支吗？→ 是则 <nav> / <main> / <aside>；
  2. 单独拎出去还成立吗？→ 成立则 <article>；
  3. 是「同一主题的一段」、且我能给它一个标题吗？→ 是则 <section>；
  4. 以上都不是，我只是想要个样式钩子？→ <div>。

什么时候该用 <div> ​

这是本页要专门强调的一点：<article> 和 <section> 都不是「高级 div」，选不出语义元素时，正确答案常常就是 <div>。

<div> 没有任何语义，它存在的唯一正当理由是「作为样式 / 布局的包裹容器」——比如为了 Flex / Grid 布局、为了挂一个 class 做圆角阴影。这种纯表现性的包裹，硬塞一个 <section> 反而是误用（凭空制造了一个本应有主题却没有的区段，给读屏添乱）。

html
<!-- 误用：只是想要个布局容器，却用了 section -->
<section class="card-grid">…</section>

<!-- 正确：纯布局容器用 div -->
<div class="card-grid">
  <article class="card">…</article>
  <article class="card">…</article>
</div>

判断很简单：如果你说不出这块内容的「主题 / 标题」是什么，只是想要个盒子，那就用 <div>。 关于 <div> 作为「最后手段」的完整说明，见 分组内容。

下一步 ​

分块的问题解决了，接下来是与之孪生的另一半——这些区段里的标题该怎么标。下一页讲 h1–h6 的层级规则、那段「文档大纲算法」的避坑史料，以及现实里到底该怎么用：标题层级与文档大纲。