article 必须包裹可独立分发的完整内容单元，嵌套时子 article 必须是父级的逻辑副本；判断标准是删掉周围内容后能否单独讲清一件事、被转发或索引；必须含标题级元素（h1–h6），嵌套仅限于真正独立的内容如引用旧文。
直接说结论：article 不是“套个样式容器”，它必须包裹**可独立分发的完整内容单元**，嵌套时子 article 必须是父级的逻辑副本，否则会破坏大纲、误导读屏器、让 RSS 抓错条目。
怎么判断该用 article 还是 section
核心就看：删掉周围所有内容，这段还能不能自己讲清楚一件事、能不能被单独转发、RSS 订阅或搜索引擎索引？
- 能 → 用
article（如：一篇博客全文、一条用户评论、引用的旧文） - 不能 → 用
section（如：长文里的“背景”“方法”“结论”三块，合起来才有意义） - 纯视觉分组 / 无语义需求 → 用
div
常见误判：首页上并列的三篇摘要，很多人用一个 section 包住全部——其实每篇摘要都该是独立的 article，外层用 main 或 section 统一管理。
article 必须含标题，但不强制 h1
每个 article 至少得有一个标题级元素（h1–h6），否则 W3C 验证器报 warning，读屏器可能跳过整块，SEO 也可能降权。
- 主文章用
h1，评论用h2，评论里的回复用h3—— 按内容层级走，不是按页面全局走 - 没文字标题？至少加
<header><h2 class="sr-only">用户评论</h2></header>占位 - 别为了“统一视觉”全降成
h3，语义断裂比样式不一致后果更重
嵌套 article 的合法场景和写法
嵌套本身合法，但只适用于「父内容中包含另一个可独立存在的内容」，比如博客正文里引用一篇完整旧文，或产品页中嵌入一条带作者、时间、正文的专家评测。
- 子
article必须自带完整结构：至少一个标题 + 主体内容（p、section、figure等） - 禁止把“背景/方法/结论”拆成三个
article嵌套在主article里——这会让大纲生成器把它们当同级主内容，层级全乱 - HTML 验证器会报错
Element article not allowed as child of element article，如果模板里漏写结束标签或用了自闭合写法（<article></article>是非法的）
最容易被忽略的结构细节
很多人写了 article 标签就以为万事大吉，其实关键在上下文：
-
article内部可以有自己的header和footer，比如用<time datetime="2026-04-29">4月29日</time>而不是普通p - 同一页面多个
article共存时，各自h1不冲突——浏览器按每个article构建独立大纲 - 嵌套超过两层（如
article→article→article）就该警惕，读屏器容易迷失，W3C 推荐扁平化
真正起作用的从来不是标签名本身，而是它包裹的内容是否真的“可独立存在”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
