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