HTML文档结构中独立文章article标签元素用法与解析

今天来深入聊聊article这个标签——别急着划走，它看似基础，但真正能准确使用的人并不多。

简单来说，article并不是一个普通的“内容容器”。它更像是赋予内容一张“独立身份证明”——用对了，搜索引擎和辅助阅读工具就能精准识别出“这段内容可以独立分发或复用”；用错了，就好比身份证上的信息填错了地址，带来的麻烦可想而知。

如何判断是否该使用 article？关键看它能否“独立成篇”

一个非常实用的判断技巧：将那段HTML代码复制出来，粘贴到一个空白文件中打开。如果用户能一眼看出三个核心信息——作者是谁、发布时间是什么时候、讲了什么内容——那么这段内容就完全符合article的使用标准。

• ✅ 博客正文包含

  标题

  作者:李四 更新时间:2026-05-28

  → 完全合规
• ✅ 新闻卡片包含

  暴雨致多地停课

  据教育局通报……

  → 每一条新闻都应作为独立的article处理
• ❌ 首页“热门标签”模块外围套上article → 这仅仅是用于分组的逻辑区块，更适合使用section
• ❌ 导航栏、页脚、侧边栏广告位 → 语义完全错位，导航用nav、页脚用footer、侧边栏用aside，各司其职

article 内缺少 h1–h6 等于语义不完整

虽然缺少标题时浏览器不会报错，但屏幕阅读器很可能直接跳过整个内容区块，Lighthouse 检测也会给出警告提示，Google 的排名算法同样不会青睐这类结构。

• 标题是必不可少的，并且必须精准概括本块的核心主题，例如

  如何排查 fetch 超时问题

  ，而不是笼统地写成

  我的技术博客

• 不强制使用h1；在首页或列表页中，每篇文章使用h2更加合理，避免出现多个h1造成层级混乱
• 如果确实没有标题？至少应该用
  占位，不要让article处于空置状态
• 千万不要用

  模拟标题——屏幕阅读器根本无法识别这种结构

嵌套 article 的唯一合理场景：子内容同样满足“三可”原则

从语法上讲，嵌套本身是允许的，但绝大多数误用的情形，本质上是因为混淆了“视觉分组”与“语义独立”这两个概念。

• ✅ 合法：博客正文（外层article）中的每一条评论（每条都包含昵称、发布时间、标签、独立URL）→ 每条评论都可以是一个独立的article
• ✅ 合法：主报道中嵌入了一段专家观点，且该观点拥有自己的署名、发布时间和原文出处链接 → 这段观点可以被独立引用
• ❌ 错误：将“第一部分”“第二部分”包装成子article → 这类情况应该使用section
• ❌ 错误：嵌套层级超过两层（article → article → article）→ 说明内容粒度已经失控，需要重新梳理整体结构

article 和 section 的本质区别一句话就能说清

section 代表“主题分区”，而 article 代表“独立实体”。判断的关键不在于内容形式上是否像一篇文章，而在于将其单独提取出来后，信息量是否依然完整可用。

• 技术文档中的“安装步骤”“配置说明”“API列表” → 各自使用section（它们合并在一起才构成完整的文档内容）
• 但如果“API列表”本身是一份可以独立发布的接口文档（包含标题、作者、更新时间、独立的标签）→ 那它就应该使用article
• 产品页的“用户评价”区域 → 整个区域使用section或aside，而每一条评价则使用article
• 不要用section去包裹一篇完整的文章——这等于主动放弃了语义优势，对搜索引擎优化和无障碍访问都没有任何好处

最后提醒一个容易被忽视的细节：元信息的机器可读性。中的datetime属性必须采用 ISO 8601 格式，像

发布于2026年5月28日