article用于可独立传播的内容，如单篇博客；section用于需上下文的主题分组，如“安装步骤”；div仅用于无语义的样式容器；section必须含h1–h6标题，否则无障碍失效。
别用 section 包导航栏，也别把整页内容塞进一个 article——语义标签不是 div 的高级替身，而是告诉浏览器“这块内容到底算什么”的声明。
判断该用 article 还是 section，只看它能不能被单独发到 Twitter 上让人看懂
这是最直接的实操判断法。复制你打算包裹的 HTML 片段，新建一个空白 HTML 文件，只放这段内容，打开看：
- 能独立表达完整意思、有作者/时间/标题、别人转发也不迷糊 → 用
article - 脱离当前页面就只剩半句话，比如“规格参数”“用户评价”“安装步骤”，必须靠上下文才能理解 → 用
section - 既不能独立存在，又没明确主题（比如轮播图外层、纯样式容器）→ 老实用
div
误用后果很实在：RSS 解析器会跳过 section，阅读模式可能直接过滤掉它；而给每张产品图都套 article，会让屏幕阅读器把整个页面读成一堆“文章”，主次全乱。
section 必须带 <h1>–<h6>，否则等于没写
没有标题的 section 在无障碍树里不会被识别为逻辑单元，Chrome DevTools 的 Accessibility 面板里压根不显示它。这不是可选建议，是语义生效的前提：
立即学习“前端免费学习笔记（深入）”；
- 标题可以是
<h2>安装步骤</h2>，也可以是<h3>常见错误码</h3>，但必须在同一个section元素内 - 嵌套的
section不能共用父级标题，每个都要有自己的层级标题（如外层<h2>，内层用<h3>） - 如果只是想加个 margin 或背景色，别硬塞
section——div+ class 更诚实，也更可控
写成 <section><p>这是服务介绍</p><button>立即咨询</button></section>，跟写 <div> 没区别，还多占一个语义标签。
article 可以嵌套 section，但 section 不该硬塞一堆 article
嵌套本身合法，但得符合内容关系：
- ✅ 合理：
article里分「背景」「方法」「结论」三块，每块用section—— 它们是同一篇内容的子部分 - ❌ 错误：用
section包一个「最新文章」列表，里面每篇都用article—— 这说明外层该用<main>或<div>，因为这些文章彼此独立，不是同一主题下的分组 - ⚠️ 注意：嵌套太深时，
header和footer容易归属错位。内层article的<header>描述的是它自己，不是外层那个
真不确定怎么嵌，打开 Chrome DevTools → Accessibility 面板，看结构树是不是你预期的样子。不是？那就该重构。
兼容性底线：IE8 及更早版本不认 article 和 section
它们不是 CSS 类名，是 HTML5 原生标签，拼错、漏 <!DOCTYPE html>、或在旧 IE 里不用 polyfill，语义就直接失效：
- 必须小写：
<article>✔️，<Article>❌ - 必须声明 DOCTYPE：
<!DOCTYPE html>缺不得，否则 Safari 5.1 以下、IE9 以下当未知元素处理 - 若仍需支持 IE8，得在 JS 里提前执行
document.createElement('article')和document.createElement('section')，或引入 html5shiv
真正难的从来不是语法，而是团队对“这块内容到底算不算独立”有没有共识——写之前先问一句：它摘出来，别人能看懂吗？不能，就别碰 article。
