还在混用 <section> 和 <article>？一文彻底搞懂 HTML5 语义化

本文系统性地对比了 HTML5 中＜section＞和＜article＞元素的语义、用法与嵌套关系，结合实际代码示例，阐述了如何在不同场景下正确选择和使用这两个标签，以提升网页的可访问性、SEO 表现与代码可维护性。

在 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 中出现）。
文档修订记录、标签等