今天来深入聊聊article这个标签——别急着划走，它看似基础，但真正能准确使用的人并不多。
简单来说，article并不是一个普通的“内容容器”。它更像是赋予内容一张“独立身份证明”——用对了，搜索引擎和辅助阅读工具就能精准识别出“这段内容可以独立分发或复用”；用错了，就好比身份证上的信息填错了地址，带来的麻烦可想而知。
如何判断是否该使用 article？关键看它能否“独立成篇”
一个非常实用的判断技巧：将那段HTML代码复制出来，粘贴到一个空白文件中打开。如果用户能一眼看出三个核心信息——作者是谁、发布时间是什么时候、讲了什么内容——那么这段内容就完全符合article的使用标准。
- ✅ 博客正文包含
标题
作者:李四 更新时间:
- ✅ 新闻卡片包含
暴雨致多地停课
据教育局通报……
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去包裹一篇完整的文章——这等于主动放弃了语义优势，对搜索引擎优化和无障碍访问都没有任何好处
最后提醒一个容易被忽视的细节：元信息的机器可读性。 发布于2026年5月28日中的datetime属性必须采用 ISO 8601 格式，像article内部的header和footer的作用范围仅限于当前区块，不要把全站通用的 logo 或版权信息放进去。
