必须配～标题，否则语义等同，导致大纲空节点、屏幕阅读器跳过及lighthouse报错；标题可视觉隐藏但不可用div或aria-label替代；嵌套时标题层级须递进，不宜超两层；判断用还是应基于内容能否独立理解。
section 不配标题，导航索引就失效
没有 <h2></h2>～<h6></h6> 的 <section></section> 在浏览器大纲视图里显示为空节点，屏幕阅读器跳过它，Lighthouse 直接报“Missing heading”错误。这不是兼容性问题，是 HTML5 规范强制要求——没标题的 <section></section> 语义等同于 <div>。
<p>常见错误现象：<code><section><p>部署步骤</p>
<ol>...</ol></section>，看着像一个模块，但大纲里根本找不到它。
- 标题可以视觉隐藏，只要标签存在：
<h3 class="visually-hidden">部署步骤</h3> - 不能用
<div class="title"> 或 <code>aria-label替代真实标题标签 -
<h1></h1>全页只能有一个，<section></section>内部推荐从<h2></h2>起始 - 正确嵌套：父
<section></section>用<h2></h2>，子<section></section>用<h3></h3> - 嵌套不宜超过两层，三层以上容易让大纲树混乱，优先考虑是否该拆分主题或改用
<article></article> -
<section></section>里不要包<nav></nav>或<footer></footer>—— 它们已有完整语义，再套一层反而干扰解析 - 能 →
<article></article>（如单篇博客、一条新闻、用户评论） - 不能，但它有明确主题且依赖上下文 →
<section></section>（如“API 响应格式说明”“售后服务条款”） - 既不能独立，又没主题 → 老实用
<div> <p>常见反例：<code><article></article>包整页“关于我们”，或给轮播图外层硬套<section></section>—— 它们只是交互容器，不是可命名的主题单元。长文档里 section 的真正难点是结构预判
写
<section></section>最难的不是语法，而是动笔前得确认：这段内容，有没有资格出现在文档大纲里？如果起不出名字（比如“这里放点东西”“先加个容器”），大概率不该用
<section></section>。过度嵌套、标题缺失、同级逻辑断裂，根源都在这一步没想清楚内容关系。浏览器不渲染差异，但 Chrome DevTools 的 Accessibility 面板会立刻暴露结构是否合理——打开看看，大纲树是不是你预期的样子。
嵌套 section 时标题层级必须递进
浏览器靠显式节元素（<section></section>、<article></article>）建立独立大纲上下文。每个 <section></section> 内部的 <h2></h2>～<h6></h6> 是重新计数的，不是全局连续编号。
错误写法：<section><h2>安装步骤</h2>
<section><h2>前置条件</h2></section></section> → 两个 <h2></h2> 被识别为并列，而非父子关系。
section 和 article 的分工不是看长度，而是看独立性
判断用 <section></section> 还是 <article></article>，只问一句：把这块内容单独复制出来，贴到新 HTML 文件里打开，能不能被完整理解？
