必须用而非的条件是：内容有独立主题、含–标题、能被单独理解或复用；否则应使用，因其无语义，更可靠且兼容性更好。
什么时候必须用 <section></section>，而不是 <div>
<p>只有当这块内容满足三个条件时才该用 <code><section></section>：有独立主题、带 <h1></h1>–<h6></h6> 标题、能被单独理解或复用（比如 RSS 抓取、大纲导出）。浏览器的“大纲视图”会把它列为一个可跳转章节，读屏器会报“section，产品介绍”。
常见误用：<section></section> 包裹轮播图容器、下拉菜单、模态框遮罩层——这些只是交互支撑结构，没标题也没语义主题，纯属布局/脚本需要，应一律用 <div>。
<h3>
<code><section></section> 套 <section></section> 为什么总出问题
嵌套 <section></section> 本身不违法，但每层都必须有对应标题。比如外层是 <h2>用户评价</h2>，内层若再分“好评”“差评”，就得各自配 <h3></h3>。否则浏览器大纲里会出现空节点，NVDA 会读成“section，空白”，视障用户无法定位。
实操建议：
- 用 Chrome DevTools → “Accessibility” 面板实时看结构树是否连贯
- 禁用所有 CSS 后，靠标题层级仍能理清逻辑才算合格
- 如果内层只是样式分组（如卡片网格的 wrapper），直接换
<div> <h3>IE8 及更老浏览器里 <code><section></section>会怎样它们根本不认识
<section></section>，当成未知标签处理：不渲染、不继承父级样式、document.querySelector('section')查不到。哪怕加了 HTML5 Shiv，也只解决渲染，不修复语义缺失。如果你的项目还要兼容 IE8（比如政务内网系统）：
- 别用
<section></section>做关键布局容器，CSS Grid / Flex 的父容器一律用<div> <li>语义化只在现代浏览器生效，老版本只能靠 class 名（如 <code>class="section-products"）维持 JS 查询稳定性 - 用
<footer></footer>、<header></header>等替代方案时也要同步考虑兼容性链路 - 某些 UI 库（如旧版 Bootstrap）的 JS 插件硬编码依赖
<div> 作为容器，换成 <code><section></section>后下拉菜单打不开 - React/Vue 组件根节点用
<section></section>，会导致 SSR 渲染后客户端 hydration 失败（服务端没识别语义标签） - 测试用例里 mock DOM 时，
<div> 行为最可预测；<code><section></section>在 JSDOM 中需额外配置才能模拟语义行为真正难的不是选哪个标签，而是每次写完都要问一句：这段 HTML 脱离样式和 JS 后，仅靠标题和结构，能不能让屏幕阅读器用户听懂它在讲什么。答案是否定的，就该换
<div>。</div>
为什么
<div> 在 JS 操作中反而更可靠 <p><code><div> 是唯一明确声明“此处无语义”的标签，它不会干扰 DOM 查询逻辑。比如你写 <code>document.querySelector('.sidebar')，如果某天把<div class="sidebar"> 换成 <code><section class="sidebar"></section>，而其他地方又用了section:not(.sidebar)这类选择器，就可能意外命中或漏掉节点。更隐蔽的问题：
- 别用
