判断 article 还是 section 的核心标准是“抽出来能否独立存在”：能单独发 rss 或 twitter 且语义完整 → 用 article；有明确主题但依赖上下文 → 补标题后用 section；无主题无标题 → 用 div。
别猜，直接剪出来试：能单独发 RSS 或贴到 Twitter 上让人看懂的，就该用 article；否则，先看它有没有明确主题和标题，有就用 section，没有就老实用 div。
怎么一眼判断该用 article 还是 section
核心不是“长得像不像文章”，而是“抽出来还能不能活”。打开 DevTools，复制你要包裹的 HTML 片段，新建一个空白 HTML 文件粘进去，只保留这段内容，然后打开看：
- 有
<header><h1>标题</h1></header>、<time datetime="2026-06-15"></time>、作者信息，且不依赖页面其他部分就能说清在讲啥 → 用article - 只有“规格参数”“用户评价”“安装步骤”这类短语，没标题、没时间、没作者，脱离当前页就只剩半句话 → 用
section，但必须补上<h2>规格参数</h2>（否则等于没写） - 纯按钮+一段文案，或只是为加 margin / background 的容器 → 直接用
div，硬套section反而让读屏器跳过它
section 没标题就等于白写
没 <h2></h2>～<h6></h6> 的 section 在 Chrome DevTools 的 Accessibility 面板里压根不显示为逻辑单元，搜索引擎和屏幕阅读器都当它是 div。这不是建议，是生效前提：
- 标题必须在同一个
section元素内，可以是<h2>常见错误码</h2>，也可以是<h3>网络超时</h3>，但不能靠父级h2“借”过来 - 嵌套的
section要各自有标题，外层<h2>排错指南</h2>，内层就得用<h3>DNS 解析失败</h3>，不能共用 - 如果只是想视觉分组，
div class="card"更诚实；真要语义分组，先补标题，再套标签
article 和 section 能互相嵌套吗
能，但方向不能反，逻辑不能乱：
- ✅ 合理：
article里包多个section（如一篇教程分「准备」「实操」「验证」） - ✅ 合理：
section里包多个article（如「本周热点」section下放 5 条新闻） - ❌ 错误：
section下只包一个article，且没额外主题包装（比如<section><article>...</article></section>）→ 多余，直接用article - ❌ 错误：
article内部把“相关推荐”每条都包成article，但那些只是带链接的摘要，没正文、没独立 URL、没时间 → 它们不是内容实体，只是导航线索
兼容性和拼写陷阱比你想的更硬核
IE8 不支持是事实，但真正让语义失效的，往往是更低级的错误：
- 标签名必须小写：
<article></article>✔️，<article></article>❌（浏览器当未知元素处理） - 必须声明
，漏掉它，哪怕在 Chrome 里也会导致无障碍树结构异常 - 在 XHTML 模式下写
<section></section>是非法的，HTML5 不支持自闭合语义标签 - 嵌套太深时，
header和footer归属容易错位——内层article的<header></header>描述的是它自己，不是外层容器
最实在的验证方式：打开 Chrome DevTools → Accessibility 面板，看结构树是不是你预期的样子。不是？那就该重构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
