article是语义标签，专用于可独立存在、可引用、可聚合的内容单元，判断标准是能否“单飞”——单独拎出仍能被理解。
直接说结论：article 不是用来“加样式”或“分隔区块”的，它是给浏览器、搜索引擎和读屏软件看的语义信号——只有内容本身能脱离页面独立存在、可被单独引用（比如有自己 URL）、还能被 RSS 聚合重用，才该用 article。
什么时候必须用 article？看它能不能“单飞”
判断标准就一条：把这段 HTML 单独拎出来，贴到新页面里，用户是否仍能理解它在说什么、谁写的、什么时候发的？
- 博客正文（含
<header></header>里的<h1></h1>、作者、时间，以及<footer></footer>的标签或编辑链接）→ 符合，必须用 - 新闻列表页中每条新闻卡片（标题+摘要+来源+发布时间）→ 符合，每条都套一个
article - 用户评论区里的每条评论（带昵称、头像占位、时间、内容）→ 符合，每条都是独立可引用单元
- 首页“推荐文章”模块外层容器 → 不符合，那是组织逻辑，该用
section；里面每篇推荐才用article - 侧边栏“相关链接”或页脚版权信息 → 不符合，用
aside或footer，别硬套
article 里必须有标题，且不能裸奔
没有 <h1></h1>–<h6></h6> 的 article 是语义残缺的。读屏软件可能跳过它，搜索引擎也可能降权。
- 标题建议放在
<header></header>内部，比如：<header><h2>如何正确使用 article 标签</h2> <p>作者：张三 发布时间：2026-04-15</p></header> - 不要只写
<h2>标题</h2>就完事，缺少上下文元数据会削弱“可独立性” - 避免嵌套另一个
article作为子段落（比如“第一部分”“第二部分”），那该用section；除非子内容本身也满足“三可”原则（例如一篇教程里的独立实战步骤，自带标题+作者+时间）
嵌套与兼容：老浏览器不认但不崩，样式得自己写
article 在 IE8 及更早版本里不被识别，但不会让页面白屏或错乱——它会被当普通 div 渲染，只是丢失语义。
- 现代浏览器（Chrome/Firefox/Safari/Edge）原生支持，无需额外处理
- 若需兼容 IE9，可在
加document.createElement('article')，或引入html5shiv.js - 它没有默认 margin/padding/border，想视觉上突出？得自己写 CSS，例如：
article { border-left: 3px solid #007acc; padding: 1rem; margin-bottom: 1.5rem; } - 别指望加了
article就自动适配无障碍导航——只有配合正确的标题层级和header/footer结构，读屏软件才能准确播报“这是一篇独立文章”
最容易被忽略的一点：很多人把 article 当成“高级 div”，只图结构好看。其实它的价值全在外部——SEO 爬虫靠它区分正文与边栏，读屏用户靠它跳转核心内容，RSS 工具靠它提取条目。一旦滥用，这些通道就全乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
