HTML5 article标签使用准则：打造独立内容单元

文章标签的核心价值，并非简单“包裹内容”，而是为内容赋予独立的身份标识——它仅适用于那些脱离当前页面后，依然能被完整理解、传播和索引的内容单元。

判断标准：内容能否“单飞”

你可以进行测试：将那段HTML独立提取出来，粘贴到一个空白文件中打开。用户能否立刻回答三个基础问题：

• 这是谁写的？
• 什么时候发布的？
• 讲的是什么？

能回答 → 适合使用 article；回答不了 → 改用 section 或 div。

必须包含标题和元信息

一个没有标题的 article 在语义上是不完整的：读屏软件可能跳过大段内容，Lighthouse 会给出警告，SEO 权重也可能受影响。

• 标题必须准确描述当前块内容本身（如

  如何排查 fetch 超时问题

  ），而非父页面的主题。
• 单篇主内容可以使用 h1；首页列表中每篇文章用 h2 更合适。
• 时间信息必须用 2026年5月28日 表示，datetime 属性不可或缺。
• 作者信息优先使用
  标签，而非普通段落或 div 拼接。

嵌套需满足“子内容可独立”

嵌套 article 在语法上合法，但并非总是合理。关键在于子内容是否也满足“单飞三问”。

• 合理：博客正文（外层 article）中的每条评论（包含昵称、时间、、独立 URL），各自作为独立 article。
• 合理：主报道中完整引用一篇已发布的专家评论，包含原题、作者、时间、链接。
• 错误：将长文随意拆成“背景”“方法”“结论”三个 article —— 这些应该用 section。
• 错误：三层及以上嵌套（article → article → article）—— 内容粒度失控，需要重构。

别与 section/div 混用

三者本质不同：

• article = 独立实体（支持 RSS 抓取、分享、被搜索引擎当作独立页面索引）
• section = 主题分区（如“安装步骤”“API 列表”，合起来才完整）
• div = 无语义容器（仅用于样式或脚本绑定，不传递结构含义）

导航栏、页脚、侧边栏广告位、栏目标题等，都不应套用 article —— 它们属于页面结构，并非独立的内容单元。

牢记这些关键点，下次撰写文章或设计组件时，就能更自信地判断何时该使用 article 标签。