<article>标签必须包裹可独立分发的完整内容单元，如博客全文，而非仅标题或段落；应至少含一个标题+主体内容，嵌套时子<article>须为父级的逻辑独立副本，否则破坏大纲与无障碍访问。
HTMLarticle标签必须包裹完整的内容单元，不能只包标题或段落碎片
很多人把 <article> 当成“加个语义外框”的装饰标签，随手套一个 <h2> 或一段 <p> 就完事——这会破坏文档大纲、影响屏幕阅读器识别，也违背 W3C 对 <article> 的定义：它应代表“可独立分发或复用的完整内容”，比如一篇博客、一条新闻、一个论坛帖子。
实操建议：
- 每个
<article>至少包含一个标题（<h1>–<h6>）+ 一段主体内容（如<p>、<section>或嵌套的<figure>） - 避免嵌套空的
<article>，或仅包<div>+ class 的“伪结构” - 若内容之间无独立性（比如首页的几个栏目摘要），优先用
<section>或<div>，而非硬塞<article>
嵌套 article 时，子 article 必须逻辑上是父 article 的“可独立副本”
比如一篇博客正文里引用了另一篇完整文章（带标题、作者、正文、发布时间），这时内嵌的 <article> 才合理。但若只是拆分小节（如“背景”“方法”“结论”），用 <section> 更准确——否则浏览器大纲生成器会把每个子 <article> 当作同级主内容，导致层级错乱。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- Chrome 开发者工具的“Accessibility”面板显示“Document outline has unexpected jump”
- 使用
document.querySelectorAll('article')拿到一堆语义失焦的节点，后续 JS 逻辑误判内容边界 - RSS 抓取器把子
<article>单独拎出来当独立条目推送
与 aside、section、div 混用时，优先级由内容独立性决定
<article> 不是“比 div 高级”，而是职责不同。判断顺序很简单：该块内容能否单独被 RSS 订阅、被搜索引擎当独立页面索引、被转发到其他平台仍保持意义？能 → <article>；不能 → 看情况选 <section>（有主题的分组）、<aside>（附属/补充信息）、<div>（纯样式/脚本容器）。
参数差异（实际影响）：
-
<article>自动参与 document outline，影响document.title外的语义导航 -
<section>也参与 outline，但不暗示“可独立分发” -
<aside>在 outline 中降级为辅助层级，通常不生成独立导航项 -
<div>完全不参与 outline，无障碍 API 中默认 role="generic"
兼容性没坑，但 SSR 和静态生成时需注意 HTML 验证失败风险
所有现代浏览器对 <article> 解析一致，IE9+ 也支持。真正容易出问题的是构建环节：某些 HTML 压缩工具（如 html-minifier）或旧版 CMS 模板引擎，会把未闭合的 <article> 或嵌套错位（比如 <article><article> 缺 ）直接报错中断构建，而不是静默修复。
实操建议：
- 用 W3C Markup Validation Service 跑一次输出 HTML，重点看 “Element article not allowed as child of element article” 这类提示
- 在模板中写嵌套
<article>时，显式补全结束标签，别依赖自闭合写法（<article/>是非法的） - Next.js / Nuxt 等框架中，若用
dangerouslySetInnerHTML注入含<article>的字符串，确保字符串本身结构合法，否则 hydration 会失败
最常被忽略的点：以为只要标签名对就安全，其实 <article> 的价值全在上下文——脱离内容粒度和嵌套逻辑，它就跟 <div class="article"> 没区别。
