section 标签是构建文档大纲的必要语义基础，必须配 h1–h6 标题才能参与导航索引；显式嵌套可明确层级关系，避免浏览器隐式推断出错，且 article 适用于可独立传播的内容，section 适用于依赖上下文的结构划分。
section 标签本身不提供自动导航索引功能，但它是构建可被浏览器、辅助工具和搜索引擎解析出清晰文档大纲（document outline）的必要语义基础。 没有正确嵌套的 section 和对应标题，h1–h6 的层级关系就失去结构锚点，导航索引会退化为纯视觉或 DOM 顺序猜测。
为什么浏览器“大纲视图”依赖 section 而非仅靠 h 标签
HTML5 规范定义了“隐式节（implicit sectioning）”规则：当没有 section、article、aside、nav 等显式节元素时，浏览器会尝试用 h1–h6 的数值变化推断节边界——但这极易出错。例如连续两个 h2 可能被误判为同级而非父子。
而显式使用 section 后，每个节都成为一个独立的“大纲上下文”，其内部 h1–h6 重新开始层级计数，且该节在大纲中表现为一个可折叠/跳转的节点。屏幕阅读器（如 NVDA、VoiceOver）的“标题导航”功能正是基于这个结构生成导航树。
- 错误写法：
<h2>安装步骤</h2> <p>第一步...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>前置条件</h3>→ 大纲可能把h3当作页面级三级标题，而非“安装步骤”下的子项 - 正确写法：
<section><h2>安装步骤</h2> <p>第一步...</p> <section><h3>前置条件</h3></section></section>→ 明确表达“前置条件”是“安装步骤”的子节
section 必须配标题（h1–h6）才能参与大纲生成
W3C 明确规定：一个 section 若无标题（即无 h1–h6），在文档大纲中不会产生条目，也不会被辅助技术识别为可导航单元。它会被降级为普通容器，语义失效。
这不是浏览器兼容性问题，而是规范强制要求。即使你用 CSS 隐藏了标题文字，只要标签存在，大纲仍有效；但若完全省略，section 就等价于一个带语义包袱的 div。
- 可用：
<section><h3 class="visually-hidden">用户评价</h3> <div>...</div></section> - 不可用：
<section><div class="title">用户评价</div> <div>...</div></section>→ 大纲里看不到这个节 - 注意：
aria-label或aria-labelledby无法替代真实标题标签，它们不参与 HTML 大纲算法
嵌套 section 与 article 的边界在哪
长文档中常混淆 section 和 article。关键判断标准不是内容长短，而是**是否具备独立传播或复用价值**：
- 用
section：教程的“第 3 章：表单验证”，产品页的“售后服务条款”，文档中的“API 响应格式说明”——这些内容脱离当前页面后意义模糊，需上下文支撑 - 用
article：博客正文、新闻稿、用户评论、独立发布的 FAQ 条目——这些内容可被 RSS 抓取、单独链接分享、或聚合到其他页面 - 混用常见场景：一篇技术文档用
article包裹全文，内部用多个section划分“背景”“原理”“示例”“注意事项”；每个section下再嵌套article表示独立代码示例
最容易被忽略的是：即使你写了所有 section 和标题，如果没用 main 包裹主体内容，或把导航、侧边栏也塞进 section 里，大纲仍会混乱——main 是告诉机器“这里才是用户真正要读的部分”，其余都是附属。语义结构不是加标签，而是做减法，剔除干扰项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
