section与div的本质区别：HTML区块划分逻辑

section必须带标题，否则在浏览器大纲中不构成节点，读屏器会跳过或报“空章节”，Lighthouse标记为可访问性问题；它是有独立主题的逻辑块，主题由标题锚定，无标题时语义失效，应改用div。

section 必须带标题，否则语义失效

没 <h2></h2> 到 <h6></h6> 的 <section></section> 在浏览器大纲里不构成节点，读屏器会跳过或报“空章节”，Google Lighthouse 也会标为可访问性问题。它不是“高级 <div>”，而是“有主题的逻辑块”——主题靠标题锚定。<p>常见错误现象：<code><section class="hero-banner"></section>、<section><div class="carousel-controls"></div></section> 这类纯样式/交互容器硬套 <section></section>，实际语义断裂。

• 正确做法：哪怕视觉隐藏，也得加语义标题，例如 <h3 class="visually-hidden">推荐商品</h3>
• 标题层级要连贯：父 <section></section> 用 <h2></h2>，子 <section></section> 就该用 <h3></h3> 或更低，不能全堆 <h1></h1>
• 如果一时想不出标题，大概率说明它不该是 <section></section>

div 是唯一明确声明“此处无语义”的标签

<div> 不传递任何内容含义，只表示“我划了个框”。它对 SEO、读屏器、代码审查工具来说等于透明——这些工具只看你加的 <code>class、id 或 ARIA 属性。

使用场景非常明确：

立即学习“前端免费学习笔记（深入）”；

• CSS 布局容器：如 <div class="grid-container">、<code><div class="flex-row"><li>JS 操作锚点：如 <code><div id="modal-root">、<code><div data-js="chart-renderer"><li>纯功能区域：如 <code><div class="dropdown-menu">、<code><div aria-live="polite"><p>别被类名误导：<code><div class="product-section"> 类名带 “section” 不代表它该是 <code><section></section>；有没有独立主题和标题，才是判断依据。

  选错标签不影响渲染性能，但会干扰结构理解

  <section></section> 和 <div> 渲染开销完全一致，CSS 选择器、DOM 查询（比如 <code>document.querySelector('section')）、事件绑定行为也一模一样。它们的区别不在功能，而在信号强度。

  这个信号直接影响三件事：

  • 浏览器“文档结构”视图能否生成合理大纲
  • NVDA/VoiceOver 用户能否用快捷键（如 Ctrl+Alt+1）跳转到逻辑区块
  • Google 抓取时是否把关键内容识别为主干，而非淹没在一堆无意义容器中

  强行把所有 <div> 换成 <code><section></section>，反而会让大纲膨胀出一堆无标题节点，阅读器读起来卡顿，Lighthouse 可访问性评分直接掉档。

  嵌套和替换没有安全边界，得按内容粒度重审

  不存在“<section></section> 套 <div> 就安全”这种捷径。真正要问的是：这一层内容是否天然可命名、可摘要、可单独链接？<p>典型反例：</p><ul><li>整个页脚写成 <code><section></section> —— 它更适合 <footer></footer>

• 轮播图的左右箭头容器用 <section></section> —— 纯 UI 控件，无主题，用 <div> 更诚实<li>三层 <code><section><section><section></section></section></section> 嵌套 —— 很可能该用 <article></article> 或重构层级，而不是堆语义标签

最易被忽略的一点：当你在写组件根节点（比如 React 的 function ProductCard() { return <div>...</div> }），内部逻辑自洽但对外无独立主题时，<div> 不是妥协，而是精准表达。</div>