article标签用于语义独立、可单独理解与复用的内容，如博客正文、新闻卡片、评论等；必须含标题（h1–h6），支持合理嵌套，不可与section、div混用。
用 article 标签不是为了“看起来像文章”，而是为了告诉浏览器、搜索引擎和读屏软件：“这段内容能自己站得住。”它必须语义独立，脱离当前页面也能被理解、引用或复用。
什么内容该用 article？看能不能“单飞”
判断标准很直接：把整段 HTML 复制粘贴到一个空白 HTML 文件里打开，用户是否仍能看懂这是什么、谁写的、什么时候发的？
- 博客正文（含标题 + 作者 + 发布时间 + 正文）→ 符合，必须用
- 新闻列表里的每条卡片（标题 + 摘要 + 来源 + 时间）→ 每条都该套一个
article - 评论区里的每条评论（昵称 + 时间 + 内容 + 回复数）→ 独立可引用，每条都是
article - 首页“猜你喜欢”模块外层容器 → 不符合，那是组织逻辑，该用
section
article 必须带标题，不能裸奔
没有 <h1></h1>–<h6></h6> 的 article 是语义残缺的。读屏器可能跳过，SEO 也可能降权。
- 标题建议放在
<header></header>内部，比如<header><h2>如何正确使用 article 标签</h2> <p>作者：李四｜2026-06-12</p></header> - 如果某条内容确实无显式标题（如一条简短评论），至少用
<h3 class="sr-only">用户评论</h3>占位，并配合aria-label补充说明 - 避免为样式统一强行全用
<h3></h3>，语义优先于视觉层级
嵌套要真实反映内容关系
article 支持嵌套，但不是随便套——必须体现“内容包含”的真实逻辑。
- 一篇博客（外层
article）里嵌套几条评论（每个评论是独立article）→ 合理，因为每条评论可被单独转发或 RSS 订阅 - 把多个新闻摘要硬塞进一个
article，再各自用article包裹 → 结构错乱，应改为section+ 多个顶层article - 在
article里塞广告位、推荐栏 → 这些不属于该内容本身，应移出或用aside单独处理
别和 section、div 混用
三者分工明确，混用会削弱语义表达力：
-
article：强调“独立可分发”，如一篇报道、一条评论 -
section：强调“内部逻辑关联”，如文章里的“引言”“方法”“结论”，或页面中的“产品特性”区块 -
div：纯样式/脚本容器，无任何语义，仅当以上都不适用时才考虑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
