必须包含标题元素，否则语义失效：屏幕阅读器跳过、lighthouse报错、大纲为空、seo不识别；标题需在内部且层级递进，不可省略或用空标签。
没标题的 <section></section> 就是无效语义
浏览器不会报错，但屏幕阅读器完全跳过它，Lighthouse 直接标红「section missing heading」，文档大纲里显示为空节点——它和 <div> 在语义层面上毫无区别，只是多敲了几个字符。<p>你写 <code><section><p>配置步骤很简单</p></section>，跟写 <div><p>配置步骤很简单</p></div> 效果一致：无大纲入口、无锚点支持、SEO 不识别主题、无障碍树里不可见。
<h2></h2>～<h6></h6> 必须存在，但不必视觉可见
标题元素必须出现在同一个 <section></section> 内部，位置不拘（可放在 <header></header> 里，也可在 <p></p> 后面），但不能省略。
- 视觉隐藏合法做法：
<h3 class="visually-hidden">用户反馈</h3>或<h3 aria-label="用户反馈"></h3> - 绝对禁止：
<section></section>空标签、或只包<p></p>/<ul></ul>不带任何标题 -
<h1></h1>不能用在<section></section>里——页面级<h1></h1>应唯一，<section></section>内部从<h2></h2>起始
嵌套时标题层级必须递进，不能平级或跳级
父 <section></section> 用 <h2></h2>，子 <section></section> 就得用 <h3></h3>；再往下只能是 <h4></h4>。全用 <h2></h2> 会导致大纲断裂，Chrome DevTools 的 Accessibility 面板里会显示层级混乱。
- 正确：
<section><h2>部署指南</h2> <section><h3>本地调试</h3></section><section><h3>生产发布</h3></section></section> - 错误：
<section><h2>部署指南</h2> <section><h2>本地调试</h2></section></section>（平级标题破坏大纲）
实在起不出标题，大概率不该用 <section></section>
轮播图外层、导航下拉菜单、页脚图标组、纯 CSS 动画容器……这些常见场景，内容无法被命名、不能进大纲、也不支持锚点跳转，硬套 <section></section> 反而污染语义结构。
- 可命名、可引用、脱离上下文仍有意义 → 用
<section></section> - 只为加 margin、绑定 JS、控制动画 → 用
<div> <li>是独立内容单元（如新闻条目、评论、博客正文）→ 优先考虑 <code><article></article>
真正容易被忽略的是：标题不是装饰，它是语义存在的必要条件。没有它，<section></section> 就只是个带引号的 div。
