article 只用于包裹真正可独立发布的内容单元，需满足自包含、可分发、含标题/作者/时间等要素；必须包含h1–h6标题，嵌套仅限天然独立内容，误用会导致SEO降权与无障碍访问问题。

直接说结论：article 不是用来“套样式”或“视觉分组”的，它只该包裹真正能脱离当前页面、被单独转发、RSS 抓取、搜索引擎索引的内容单元。用错就等于告诉浏览器“这段内容可独立发布”，而实际并不满足——后果是大纲错乱、读屏器跳过、SEO 降权。

怎么判断一段内容该不该用 article

核心就看三件事：

• 删掉它周围所有其他内容，它自己能不能讲清楚一件事？
• 能不能复制粘贴到另一个页面、邮件或 RSS 阅读器里，别人还看得懂？
• 有没有作者、时间、标题、正文这些构成“完整内容”的基本要素？

满足以上三条，才考虑 article。比如一条用户评论、一篇技术博文、引用的旧文——都算。但“背景介绍”“方法步骤”“结论分析”这三块合起来才算一篇文章，单独拎出来任何一个都不行，那就该用 section，不是 article。

article 必须包含什么结构

W3C 明确要求每个 article 至少含一个标题级元素（h1–h6），否则验证器报 warning，读屏器可能完全忽略整块内容。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 主文章用 h1，评论用 h2，评论下的回复用 h3——按内容层级走，不是按页面全局 h1 唯一性来硬套
• 没可见文字标题？至少加 <header><h2 class="sr-only">用户评论</h2></header> 占位
• 标题不能只包在 p 或 div 里，必须是语义化标题标签
• 作者、时间、版权等元信息应放在 article 内部的 header 或 footer 中，而不是丢在外部

嵌套 article 的合法场景和雷区

嵌套本身合法，但仅限于“父内容中天然包含另一条完整、独立、可分发的内容”。

• ✅ 合法：博客正文里引用一篇旧文；产品页中嵌入专家评测（带标题+作者+正文）
• ❌ 非法：把同一篇文章拆成“引言”“正文”“结语”三个 article 嵌套——HTML 验证器会报 Element article not allowed as child of element article
• ❌ 非法：模板漏写闭合标签，或误写成自闭合形式 <article />（HTML5 不支持）
• ⚠️ 警惕：嵌套超过两层（article → article → article），读屏器容易迷失，W3C 推荐扁平化

常见错误与性能/兼容性影响

最常踩的坑不是语法错，而是语义错：

• 首页用一个 section 包住三篇摘要——其实每篇摘要都该是独立 article，外层用 main 或 section 管理
• 只把 p 段落包进 article，漏掉标题、作者、时间——内容不自洽，等于挂羊头卖狗肉
• 为统一视觉风格，全用 h3，破坏层级语义——读屏器无法建立正确导航路径
• 多个 article 共存时，各自 h1 不冲突，浏览器按每个 article 构建独立大纲，别担心“重复 h1”

真正起作用的从来不是标签名本身，而是它包裹的内容是否真的“可独立存在”。哪怕写对了所有语法，内容不独立，article 就只是个空壳。