article标签专用于独立、可分发的内容，如博客正文、新闻稿、用户评论；不可用于导航栏、页脚等非独立内容，否则误导屏幕阅读器和搜索引擎。
article 标签不是“随便包一段内容”的容器
它只该用在能独立存在、可被单独分发或复用的内容上，比如一篇博客正文、一条新闻稿、一个论坛回帖。拿它包导航栏、页脚、侧边栏，语义就错了——屏幕阅读器和搜索引擎会误判内容主次。
常见错误现象：article 嵌套在 nav 里，或者整个 main 区域外层套了个 article；更隐蔽的是，把“用户评论列表”整体包成一个 article，其实每条评论才该是独立的 article。
- 每个
article应有明确的标题（h1–h6），且标题需描述本块内容本身 - 如果内容依赖上下文才能理解（比如“上一条回复”“本节补充说明”），就不适合用
article -
article可以嵌套，但嵌套层级通常不超过两层（例如：主文章 → 作者简介 → 引用的某篇旧文）
什么时候该用 article 而不是 section
section 表达“主题分区”，article 表达“独立实体”。关键判断依据是：这段内容抽出来，还能不能自己讲清楚一件事？
使用场景对比：
立即学习“前端免费学习笔记（深入）”；
- 博客首页的「最新三篇文章」列表 → 每项用
article（每篇都自成一体） - 同一页面里的「背景介绍」「技术原理」「使用示例」三个区块 → 用
section（合起来才构成完整说明） - 产品页的「用户评价」区域 → 每条评价用
article，整个区域用section或aside
容易踩的坑：用 section 包住一篇完整文章，只因“它在页面里占了一块位置”——这放弃语义优势，对 SEO 和无障碍访问没好处。
article 的 header、footer 和 aside 怎么配
article 内部可以有自己的 header、footer、aside，但它们的作用范围仅限于该 article，不继承外层文档结构。
实操建议：
-
header里放本篇的h2标题 + 发布时间 + 作者名（别放全站 logo） -
footer放本文的标签、编辑时间、相关链接（不是网站版权信息） -
aside仅用于与本文强相关但非主线的补充（如术语解释、代码片段说明），不是放广告位的地方 - 避免在
article里再用main或body—— 这些标签全局唯一，不能嵌套
兼容性和工具链里的实际影响
现代浏览器对 article 渲染无差异，但语义信息会被开发者工具、Lighthouse、axe 等检测工具读取，并影响评分。部分 RSS 解析器和内容聚合服务也依赖 article 提取正文。
性能方面无开销，但滥用会导致 DOM 结构膨胀，间接拖慢无障碍树构建速度。
- Next.js / Remix 等框架中，若用
article包裹整个页面组件，SSR 后可能让爬虫误判为“单篇内容”，漏掉其他模块 - 使用 Markdown 转 HTML 工具时（如 remark），默认不生成
article，需手动包裹或配置插件 - 测试时可用浏览器控制台执行
document.querySelectorAll('article')快速检查是否误用或遗漏
最常被忽略的一点：article 不解决样式问题，也不自动提供任何默认 CSS。很多人加了 article 就以为“语义化完成了”，其实后续的 heading 层级、ARIA 标注、焦点管理，一个都不能少。
