应仅在内容有明确主题、可独立命名并支持锚点跳转时使用，否则用div或删除；标题层级须严格对应，禁止跳级或平级，嵌套不宜超两层。
没标题的 <section></section> 就是无效标签
浏览器和辅助技术（比如读屏软件）把 <section></section> 当作一个可导航的“章节”，但如果没有 <h2></h2>–<h6></h6> 标题，它就等于空节点。Lighthouse 会报类似 “Document outline is empty” 的警告，SEO 工具也难以提取主题意图。
- 屏幕阅读器跳过无标题的
<section></section>，用户根本感知不到这块内容存在 - 搜索引擎可能弱化该区块内文本的权重，尤其当页面其他结构也不清晰时
- 开发者协作时，别人看到
<section></section>却找不到标题，第一反应是“这里漏写了？”或“这到底想表达啥？” - 视觉上隐藏标题完全合法：
<h3 class="visually-hidden">用户反馈</h3>，只要 DOM 中存在且层级正确就行
<section></section> 和 <div> 到底怎么选
<p>关键不是“哪个更语义”，而是“这块内容能不能被叫出名字、放进大纲、支持锚点跳转”。</p>
<ul><li>只为加 margin/padding、触发动画、绑定 JS 事件 → 用 <code><div class="js-modal-trigger">，诚实又轻量 <li>内容能独立成文、可被 RSS 抓取或单独分享（如一篇教程、一条新闻）→ 用 <code><article></article>，不是 <section></section>
<div> 或更具体的 <code><nav></nav>、<footer></footer> 更合适 <main></main> 只包一个 <section></section> → 削弱分区意图，不如按真实主题拆成多个 <section></section>
<section></section> 的嵌套与标题层级必须严格对应
父 <section></section> 用 <h2></h2>，子 <section></section> 必须用 <h3></h3>；再下一层就得用 <h4></h4>。跳级（比如 <h2></h2> 后直接 <h4></h4>）或平级（两个 <section></section> 都用 <h2></h2>）都会破坏文档大纲。
- 同一级的多个
<section></section>应逻辑并列：比如「部署步骤」「性能对比」「常见问题」 -
<section></section>里嵌套<article></article>是合理的（如“客户案例”节里每条反馈是一个<article></article>），但反过来不行：不能让<section></section>包着整篇<article></article>当唯一子元素 - 如果嵌套超过两层（
<section></section>><section></section>><section></section>），大概率说明主题划分过细，结构失焦
真正难的不是写法，是写之前那个判断
<section></section> 不是语义万能胶，也不是为了“看起来更规范”而加的装饰标签。它只在内容有明确主题、能被单独引用、复制出去还能看懂时才成立。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<section><button>提交</button><p>请确认信息</p></section>—— 没标题、无主题、不可命名，纯交互容器 - 错误示例：
<section><nav>...</nav></section>——<nav></nav>本身已有明确语义，再包一层反而干扰解析 - 正确思路：写之前先问自己一句，“这段内容，我能脱口说出它的名字吗？” 说不出来，就别用
<section></section>，换<div> 或直接删掉 <p>语义结构一旦写错，后期靠 CSS 或 ARIA 强行补救，效果往往比不用还糟。</p> </div>
