在 HTML5 中，语义化标签的引入极大地提升了网页结构的可读性与可维护性。其中，<section> 和 <article> 是最常用也最容易混淆的两个元素。它们虽然都用于划分内容区块，但在独立性、重用性以及适用场景上有着本质区别。本文将深入探讨这两个元素的核心概念、使用场景、嵌套方式及最佳实践，帮助你在实际开发中做出更合理的选择。

一、基本定义与语义

<section> 元素

  • <section>是一个通用的文档分区元素，用于对内容进行主题性分组。它通常包含一个标题（如 <h1> 至 <h6>），表示文档中一个相对独立的内容区块，但其内容通常是更大整体的一部分。

  • 适用场景：章节、选项卡面板、文章中的小节、页面中的功能模块等。

<article>元素

  • <article> 表示一个独立的、完整的、可独立分发或重用的内容块。它应当具备自包含性，即使脱离当前页面上下文，仍然具有完整的意义。

  • 适用场景：博客文章、新闻报道、用户评论、论坛帖子、产品卡片等。

二、核心区别

特性

<section>

<article>

独立性

相对独立，通常作为更大内容的一部分

完全独立，可单独存在

重用性

一般不适合单独重用

适合通过 RSS、剪藏、分享等方式重用

内容性质

主题性分组

完整的内容单元

嵌套关系

可包含 <article>

可包含 <section>

三、嵌套关系与结构设计

1. <article> 内包含 <section>

当一篇独立文章内部需要划分多个主题章节时，应在 <article> 内部使用 <section>。

<article>
  <h2>HTML5 语义化指南</h2>
  <p>语义化是现代前端开发的基础...</p>
  <section>
    <h3>为什么需要语义化</h3>
    <p>语义化有助于 SEO 与可访问性...</p>
  </section>
  <section>
    <h3>常见语义化标签</h3>
    <p>header、footer、main、section、article...</p>
  </section>
</article>
2.<section> 内包含 <article>

当一个内容区块由多个独立内容单元组成时，应使用 <section> 作为容器，内部放置多个 <article>。

<section>
  <h2>最新技术文章</h2>
  <article>
    <h3>深入理解 Flex 布局</h3>
    <p>Flex 是现代 CSS 布局的核心...</p>
  </article>
  <article>
    <h3>Vue 3 组合式 API 实战</h3>
    <p>组合式 API 让逻辑复用更加清晰...</p>
  </article>
</section>
3. 复杂嵌套

在复杂页面中，两者可以多层嵌套，但必须保持语义清晰，避免为了“语义化”而过度嵌套。

<article>
  <header>
    <h1>前端架构演进之路</h1>
    <p>作者：文曲 | 发布时间：2026-03-20</p>
  </header>
  <section>
    <h2>从多页到单页</h2>
    <p>...</p>
  </section>
  <section>
    <h2>微前端的崛起</h2>
    <p>...</p>
  </section>
  <footer>
    <p>标签：架构、前端、微前端</p>
  </footer>
</article>

四、选型决策树（何时用哪个）

  • 是否需要独立分发或重用？

→ 是：使用 <article>。

→ 否：考虑 <section>。

  • 是否代表一篇完整的作品（文章、评论、帖子）？

→ 是：使用 <article>。

→ 否：考虑 <section>。

  • 是否只是一个按主题划分的区块，且属于更大内容的一部分？

→ 是：使用 <section>。

→ 否：考虑 <article>。

五、与其他语义化标签的对比

标签

语义

<div>

无语义，仅用于布局或样式钩子

<section>

主题性内容分组

<article>

独立、完整的内容单元

<aside>

与主内容间接相关的附加内容（侧边栏、广告、引用）

<header>

页面或区块的引言区域

<footer>

页面或区块的元信息区域

引言区域（<header>）

含义

<header>代表一个页面或一个内容区块的 介绍性区域，类似于文章的开头或章节的引言。它通常包含：

  • 标题（<h1> ~ <h6>）。

  • 品牌 Logo。

  • 导航菜单（<nav>）。

  • 搜索表单。

  • 作者简介、发布日期等与内容相关的介绍信息。

关键点

  • 它不一定是页面最顶部的“页头”，也可以是 <article>、<section> 等区块的头部。

  • 一个页面可以有多个 <header>，但每个区块通常只有一个。

  • 它不是用来包裹所有顶部内容的“容器”，而是承载 导引性、介绍性内容。

元信息区域（<footer>）

含义

<footer> 代表一个页面或内容区块的 附加信息区域，通常包含与所属区块相关的 元数据（metadata） 或补充信息。常见内容有：

  • 版权声明（©）。

  • 联系方式。

  • 相关链接（如隐私政策、使用条款）。

  • 作者信息。

  • 发布日期（如果未在 header 中出现）。

  • 文档修订记录、标签等

关键点

  • 同样，<footer> 可以是页面级（全页底部），也可以是 <article>、<section> 等区块的尾部。

  • 它强调 元信息——即关于内容本身的数据，而非主要内容。

六、语义化的重要性

  1. SEO 优化：搜索引擎能更准确地识别内容结构，提升关键词权重。

  2. 可访问性：屏幕阅读器可借助语义标签提供更清晰的导航体验。

  3. 代码可维护性：清晰的语义结构降低团队协作成本，便于后续迭代。

  4. 未来兼容性：遵循 HTML 标准的语义化代码更具前瞻性，能更好地适配未来技术。

总结

  • <section> 适用于 主题性分组，是内容的“容器”，通常作为更大结构的一部分。

  • <article> 适用于 独立完整的内容单元，具备可重用、可分发特性。

  • 两者可以互相嵌套，但需保持语义清晰，避免滥用。

  • 合理使用语义标签，不仅能提升 SEO 与可访问性，还能显著提高代码的可读性与可维护性。

在实际开发中，选择 <section> 还是 <article>，本质上是在判断当前内容“是否独立”与“是否可重用”。掌握这一核心原则，你将能构建出结构清晰、语义明确的现代网页。

彩蛋

文中配有完整示例，点击《语义化示例：section 与 article 的正确使用》即可查看。