无标题的<section>在文档大纲中不出现，因W3C规范强制要求其必须包含<h1>–<h6>才能参与大纲生成；即使标题视觉隐藏，只要标签存在即有效，但用<div>替代标题或依赖ARIA属性均无法补救语义缺失。
不加标题的 <section> 在文档大纲里根本不会出现，屏幕阅读器跳过、SEO 工具忽略、浏览器“大纲视图”里压根看不到——它语义上就等于 <div>。
为什么没标题的 <section> 会被辅助技术无视
W3C 规范强制要求：一个 <section> 必须包含至少一个 <h1>–<h6> 才能参与文档大纲生成。这不是兼容性问题，是语义算法的硬性门槛。
- 即使你用 CSS 把标题文字隐藏（比如加
class="visually-hidden"），只要标签存在，大纲仍有效 - 但若用
<div class="title">安装步骤</div>替代<h2>，该<section>就不会在无障碍树中作为可导航节点出现 -
aria-label或aria-labelledby完全不参与 HTML 大纲计算，仅影响 ARIA 树，不能补救语义缺失
嵌套 <section> 时标题层级怎么配才不出错
每个嵌套的 <section> 都要自带标题，且不能复用父级标题——浏览器会把它当作独立节上下文，内部 <h1>–<h6> 重新计数。
- 错误写法：
<section><h2>API 文档</h2><p>接口列表</p><section><p>用户管理接口</p></section></section>→ 子<section>没标题，不构成子节 - 正确写法：
<section><h2>API 文档</h2><p>接口列表</p><section><h3>用户管理接口</h3><p>POST /users</p></section></section> - 标题不必紧贴
<section>开头，但必须在同一个元素内；<h3>放在段落之后也合法
<section> 和 <article> 在长文档里怎么分工
关键不是内容长短，而是能否脱离上下文被单独理解或复用：
立即学习“前端免费学习笔记（深入）”；
- 用
<section>：教程的「第 4 章：错误处理」、产品页的「售后服务条款」、文档里的「响应字段说明」——它们依赖当前页面存在 - 用
<article>：博客正文、每条评论、嵌套在教程里的「专家观点引述」（带作者、时间、可 RSS 抓取）——复制到新页面也能独立成立 - 常见反例：把整个「关于我们」页包进一个
<article>；或在「客户案例」<section>里给每张截图都套<article>（无正文、无作者、无独立 URL）
Chrome DevTools 里一眼验证 <section> 是否生效
打开 DevTools → 切到 **Accessibility** 面板 → 展开左侧结构树，就能看到浏览器实际解析出的大纲节点。所有没标题的 <section> 都不会出现在这里，只会显示为普通容器。
- 如果结构树里只有
<h2>而没有对应节节点，说明<section>语义失效 - 嵌套过深时，结构树会暴露归属混乱问题（比如子
<h3>挂在了外层<article>下，而非其父<section>） - 拼写错误（如
<Section>）、漏<!DOCTYPE html>也会导致整个语义链断裂，结构树为空
真正难的不是写对标签，而是每次加 <section> 前先问一句：这块内容有没有资格出现在目录里？如果没有想好的标题，大概率不该用它。
