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>
