必须用仅当内容有明确主题且配有能概括全文的～标题；否则应使用无语义的，它才是纯布局或数据绑定的诚实选择。

没标题的 <section></section> 就是无效语义，和 <div> 一样——但多写了一个标签，还误导人。 <h3>什么时候必须用 <code><section></section>？

只有一种情况：这段内容有明确主题，且能配上一个 <h2></h2>～<h6></h6> 标题，标题还能准确概括内部全部内容。

• ✅ 合理：<section><h3>客户评价</h3> <p>“响应超快！”</p></section> —— 主题清晰、可独立成块、读屏器会报“section，客户评价”
• ✅ 合理：<section><h2>部署指南</h2> <section><h3>本地环境</h3></section></section> —— 嵌套合法，子级标题层级下降
• ❌ 错误：<section><p>加载中…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr&#8203;&#8203;oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr&#8203;&#8203;oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section> —— 没标题，语义失效，应改用 <div> <h3>什么时候只能用 <code><div>？ <p><code><div> 是唯一被 HTML 规范明确定义为 “no special meaning at all” 的标签。它不是备选，而是唯一诚实的选择。 <ul><li>✅ 合理：<code><div class="grid-container"> —— 纯为 CSS Grid 提供布局上下文 <li>✅ 合理：<code><div id="modal-root"> —— JS 渲染锚点，不承载内容主题 <li>✅ 合理：<code><div data-chart-id="revenue-q2"> —— 仅作数据绑定钩子 <li>❌ 错误：<code><div class="section-pricing"><h3>价格方案</h3></div> —— 用 class 假装有语义，实际放弃结构价值

嵌套关系不能颠倒：为什么 <div> 里包 <code><section></section> 多数是错的

<section></section> 表示“这里是一节”，它的存在本身就在声明文档大纲中的一个节点。把它塞进一个无语义容器里，等于把章节编号贴在一张白纸上再塞进文件夹——文件夹本身没编号，整件事就失去意义。

• ✅ 合理：<section><h2>产品特性</h2> <div class="card-grid"><div class="card">…</div></div></section> —— <div> 只负责视觉排列 <li>❌ 错误：<code><div class="wrapper"><section><h3>用户反馈</h3></section></div> —— class="wrapper" 没语义，应直接删掉或换成 <main></main> / <article></article>
• ⚠️ 唯一例外：<div id="app"></div>，由 React/Vue 动态生成 <section></section> —— 这是运行时行为，不是手写 HTML 的参考

检查语义是否生效的最简方法

别靠感觉，用工具验证。打开 Chrome DevTools → 切到 “Accessibility” 面板，看结构树里有没有你写的 <section></section> 节点；或者装 HTML5 Outliner 插件，看大纲是否如你所想那样展开。

• 如果某段内容没出现在大纲里，那它的 <section></section> 就白写了
• 如果读屏器（如 NVDA）朗读时跳过“章节名”，只念第一句文本，说明标题缺失或不在同一作用域内
• 标题可以不在 <section></section> 开头，但必须在闭合前出现，且不能跨父级（比如不能靠 <header></header> 外部的 <h2></h2> “代管”）

最容易被忽略的其实是标题位置的灵活性——它可以在 <section></section> 内任意位置，只要没被其他区块隔开；但很多人卡在“必须紧贴开头”这个误解上，结果硬把 <header></header> 或图标塞进标题前面，反而导致语义解析失败。