section 必须包含 h1–h6 标题才具语义，否则等同 div；div 仅作无语义布局容器；article 表示可独立分发内容，三者分工明确，误用将损害无障碍与 seo。
section 必须带标题，否则语义失效
浏览器和读屏器不认“空壳”<section></section>——它只把带 <h1></h1> 到 <h6></h6> 的区块当真。没标题的 <section></section> 在语义上等于 <div>，但还多占一个标签、误导维护者。
<ul>
<li>✅ 正确：一个产品介绍区，开头是 <code><h2>我们的服务</h2>，外面包 <section></section>
<section></section>，里面只有 <p></p> 和 <button></button>
<section></section> 内；嵌套 <section></section> 时，子级也得有自己的标题div 是纯布局钩子，别硬塞语义
<div> 的唯一官方定义就是 “no special meaning at all”。它不是“过时了”，而是定位清晰：当你需要一个 class 来写 CSS、一个 id 绑 JS 事件、或只是把几个元素视觉上归组——它就是最干净的选择。
<ul><li>✅ 适合：侧边栏容器（<code><div class="sidebar">）、模态框外层（<code><div id="modal-overlay">）、Grid/Flex 布局项
<li>❌ 不适合：把整篇博客正文包进 <code><div class="article">，明明该用 <code><article></article> 或 <section></section>
<div>——这不是 bug，是设计使然
<h3>选错标签会导致读屏器“读不懂”结构</h3>
<p>视障用户依赖标签层级理解页面逻辑。<code><section></section> 被识别为“可跳转章节”，而 <div> 完全透明。混用或滥用会让辅助技术把内容切成碎片，甚至跳过关键区块。
<ul><li>? 实测现象：NVDA 或 VoiceOver 朗读时，<code><section></section> 会报“section，标题名”，<div> 则直接念里面第一个文本，毫无上下文
<li>? 检查方法：用浏览器开发者工具 → “Accessibility” 面板，看结构树是否合理分层</li>
<li>? 常见坑：用 <code><section></section> 包导航栏（应为 <nav></nav>），或用 <div> 包整个主内容区（应为 <code><main></main>）
article 和 section 不是替代 div 的“升级版”
很多人以为 HTML5 新标签 = 更高级的 <div>，其实它们解决的是完全不同的问题：<code><article></article> 强调“可独立分发的内容”（如一篇博客、一条新闻），<section></section> 强调“主题性分组”，而 <div> 就是“我只负责装东西”。三者不是递进关系，是并列分工。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>? 记住一句话：能被 RSS 抓取、单独转发、或打印成一页 PDF 的内容，才考虑 <code><article></article>
<section></section> 可以包含多个 <article></article>（比如新闻列表页），但 <article></article> 内部一般不用 <section></section> 做章节划分——除非它本身足够长、有明确子主题<div> 的地盘
语义不是装饰，是结构声明。浏览器不强制你写对，但一旦出错，修复成本远高于写对的成本——尤其在后期接入无障碍审计或 SEO 优化时。</div>
