article标签是“内容身份证”，标识可独立存在、引用和聚合的完整单元；需含标题及元数据，嵌套应谨慎，兼容ie8以上且需手动样式。
article 标签不是“内容容器”，而是“内容身份证”——它声明：这段 HTML 是一个能单独存在、被引用、被聚合的完整单元。 用错就等于给搜索引擎和读屏软件发了错误信号，轻则降权，重则让残障用户跳过整块内容。
怎么判断该不该用 article？看它能不能“单飞”
把那段 HTML 剪出来，粘到一个空白 HTML 文件里打开。用户是否仍能立刻理解：这是谁写的、什么时候发的、讲了什么事？
- 博客正文（含
<header></header>里的标题+作者+时间，以及<footer></footer>的标签/编辑链接）→ 符合，必须用article - 新闻列表页中每条卡片（标题+摘要+来源+发布时间）→ 每条都该套一个
article - 用户评论区的每条评论（昵称、头像占位、时间、内容）→ 每条都是独立可引用单元，各自用
article - 首页“推荐文章”模块外层容器 → 不符合，那是组织逻辑，该用
section；里面每篇推荐才用article - 侧边栏“相关链接”或页脚版权信息 → 不符合，用
aside或footer，别硬套
article 里没标题就是语义残缺
没有 <h1></h1>–<h6></h6> 的 article，读屏软件可能直接跳过，搜索引擎也可能降权。标题不能裸奔，得带上下文：
<article><header><h2>如何正确使用 article 标签</h2>
<p>作者: 张三 发布时间: 2026-04-15</p>
</header><p>……正文内容……</p>
<footer><a href="/edit/123">编辑</a></footer></article>
不要只写 <h2>标题</h2> 就完事；<header></header> 和 <footer></footer> 不是装饰，它们是“可独立性”的结构支撑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
嵌套 article 的边界在哪？
嵌套本身合法，但绝大多数场景下不该出现。常见误用：
- 把“第一部分”“第二部分”包成子
article→ 错，那该用section - 主文章里嵌一个“作者简介” → 可以，但前提是这个简介本身也满足“三可”（可独立存在、可引用、可聚合），比如它有自己 URL、署名和发布时间
- 主文章里嵌一条“引用的旧文” → 如果那条旧文原本就是一篇完整
article，且保留了标题+元数据，嵌套才合理
超过两层嵌套（如 article → article → article）基本说明结构设计出了问题，该回退检查内容粒度是否过细。
兼容性和样式要自己兜底
article 在 IE8 及更早版本不被识别，但它不会崩——浏览器当普通 div 渲染，只是丢掉语义。现代浏览器（Chrome/Firefox/Safari/Edge）原生支持，无需 polyfill。
但它没有默认 margin/padding/border，想视觉上突出？得自己写 CSS：
article {
border-left: 3px solid #007acc;
padding: 1rem;
margin-bottom: 1.5rem;
}
别指望加了 article 就自动适配无障碍导航——只有配合正确的标题层级、<header></header>/<footer></footer> 结构，读屏软件才能准确播报“这是一篇独立文章”。最容易被忽略的，其实是那个不起眼的 <header></header> 包裹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
