section不配标题则在文档大纲中不可见，读屏软件跳过、seo忽略、accessibility面板不显示；html5规范强制要求每个section必须包含且仅含一个h1–h6标题，否则语义归零。
section不配标题，就等于没写
没标题的 <section></section> 在文档大纲里完全不可见，读屏软件跳过、SEO 工具忽略、DevTools 的 Accessibility 面板里压根不显示为导航节点。这不是兼容性问题，是 HTML5 规范强制要求：<section></section> 必须包含且仅包含一个 <h1></h1>–<h6></h6> 标签（可嵌套在子 <section></section> 里），否则语义直接归零。
常见错误包括：
- 用
<div class="title"> 替代真实标题标签 <li>把标题文字用 CSS <code>display: none隐藏但保留标签——可行；但用aria-label或aria-labelledby顶替——无效 - 标题不在同一
<section></section>元素内，比如标题在父级、内容在子<section></section>
正确做法：哪怕标题视觉上不显眼，也要写 <h3 class="visually-hidden">API 响应格式</h3>，确保结构锚点存在。
嵌套 section 时，每个都得有自己标题
浏览器大纲算法依赖显式节（sectioning content）构建可折叠节点树。父 <section></section> 的 <h2></h2> 不会自动“继承”给子 <section></section>；每个子节必须声明自己的 <h3></h3> 或更深层级标题，否则它在大纲中会被降级为无结构容器。
例如长文档中“部署指南”章节下分“环境准备”“配置文件说明”“启动命令”，不能这样写：
<section><h2>部署指南</h2> <section><p>环境准备…</p></section><section><p>配置文件说明…</p></section></section>
而应：
<section><h2>部署指南</h2>
<section><h3>环境准备</h3>
<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><section><h3>配置文件说明</h3>
<p>…</p>
</section></section>
这样屏幕阅读器才能生成正确的标题导航树，“环境准备”才真正成为“部署指南”的子项而非并列节点。
section 和 article 的混用边界很窄
长文档里最容易错把 <article></article> 当成“高级 <section></section>”来用。关键判断只有一条：把这块内容单独复制出来，贴到新 HTML 文件里打开，能不能被完整理解、有没有独立 URL 或 RSS 抓取价值？
能 → 用 <article></article>（如每条评论、引用的技术白皮书原文）
不能，但它是文档里的逻辑分块 → 用 <section></section>（如“兼容性说明”“错误码列表”“性能压测结果”）
常见踩坑：
- 用
<article></article>包裹整个“用户手册”页面——它不是独立内容单元，只是文档一部分 - 在
<article></article>内部用<section></section>划分小节，却漏掉每个<section></section>的标题 - 把“相关链接”列表每条都套
<article></article>——它们只是锚点，无正文、无作者、无时间
嵌套本身合法，但语义必须对齐：内层 <article></article> 的 <header></header> 描述的是它自己，不是外层文档。
浏览器大纲视图失效，往往不是标签写错了
即使写了 <section></section> 和标题，Chrome 的“大纲视图”（在 DevTools → Elements → 右键 → “Show Outline”）仍为空，大概率是因为 DOCTYPE 缺失或拼写错误。
<section></section> 是 HTML5 标签，必须以 开头，且标签名全小写、无下划线、无命名空间。写成 <code><section></section> 或 <_section></_section>，旧版 Safari 或 IE9+ 就当未知元素处理，语义彻底丢失。
另外注意：某些 CMS 或静态站点生成器会自动剥离空标题或重写结构，上线前务必用 Lighthouse 检查“Document outline”审计项，或直接打开 Chrome DevTools 的 Accessibility 面板看结构树是否符合预期。
