article是“独立身份证”，向浏览器、搜索引擎和读屏软件声明内容可单独抓取、转发、朗读、订阅；必须以<!DOCTYPE html>开头，需含h1–h6标题，嵌套仅限满足“三可”（可独立理解、引用、分发）的子内容。
article标签不是“内容盒子”，而是“独立身份证”
它不控制样式、不自动分栏、不带默认边距，只向浏览器、搜索引擎和读屏软件发一个明确信号：article 包裹的内容能被单独抓取、转发、朗读、订阅——比如 RSS 抓取器只认 article，不是 section 或 div。
常见错误现象：document.querySelector('article') 返回 null，或 Lighthouse 报 “Missing heading in article”，往往不是代码写错了，而是没加 !DOCTYPE html，或者用了 <_article> 这类无效拼写。
- 必须以
<!DOCTYPE html>开头，否则旧模式下语义失效 - IE8 及更早版本不识别，需用
document.createElement('article')注册（但建议直接降级为<div class="article">） - 写成
<article/>或<Article>都无效——HTML 标签大小写敏感，且不支持自闭合写法
没标题的article等于没身份证
article 不强制要求标题，但 W3C 明确建议每个 article 至少含一个 h1–h6，否则语义断裂。读屏软件可能跳过整块，Google 也可能弱化该内容权重。
- 标题必须描述本块内容本身，比如
<h2>fetch 超时重试的三种实现</h2>，而不是<h2>我的技术博客</h2> - 首页列表页中，每篇用
h2更合理；单篇博客页可用h1，但前提是页面无其他h1 - 真没标题？至少用
<h2 aria-label="无标题技术笔记"></h2>占位，别裸留空article - 别用
<div class="title">模拟标题——屏幕阅读器完全无法识别
嵌套article的唯一合法理由：子内容也满足“三可”
“三可”指可独立理解、可独立引用、可独立分发。嵌套本身语法合法，但绝大多数嵌套都是误用，根源是混淆了视觉分组和语义独立。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：主文章
article→ 每条评论含昵称、时间、<time datetime="2026-06-20">、独立 URL → 各自为article - ✅ 合法：主报道中嵌入专家评论，且该评论本身有署名、发布时间、原文链接 → 可被第三方直接引用
- ❌ 错误：把“第一部分”“第二部分”包成子
article→ 那该用section - ❌ 错误：三层嵌套（
article→article→article）→ 内容粒度失控，说明结构需要重梳
article 和 section 的本质区别就一句话
section 是“主题分区”，article 是“独立实体”。判断依据只有一个：把这段 HTML 剪出来，粘到空白文件里打开，用户是否还能立刻回答三个问题——这是谁写的？什么时候发的？讲了什么事？
- 博客首页“最新三篇文章”列表 → 每项用
article（每篇都自成一体） - 同一页面里的“安装步骤”“配置说明”“API 列表” → 各自用
section（合起来才构成完整说明） - 产品页的“用户评价”区域 → 整个区域用
section或aside，每条评论用article - 侧边栏“热门文章推荐”列表 → 外层用
section，每篇推荐用article
最容易被忽略的是：没有作者、时间、独立 URL 的内容，大概率只是 section，哪怕它看起来像一篇文章。
