必须用<section>而非<div>当内容可命名、进大纲、支持锚点跳转；无标题的<section>语义失效，屏幕阅读器不可见，Lighthouse报错，大纲为空节点。
<section></section>不是视觉分块工具，它只在内容能被命名、进大纲、锚点跳转时才该用；没标题的<section></section>语义上等于<div>，只是多敲了几个字符。
<h3>什么时候必须用 <code><section></section> 而不是 <div>
<p>关键看这块内容能不能被叫出名字、放进文档大纲、或别人说“看第三 section 的性能对比”时你立刻知道指哪——比如「部署步骤」「用户反馈」「技术参数」。</p>
<ul>
<li>能起名、有上下文意义、可被单独引用 → 用 <code><section></section>
<div class="js-modal-trigger">
<li>轮播图外层、导航栏、页脚图标列表 → 优先用 <code><nav></nav>、<footer></footer> 或 <div>，别硬套 <code><section></section>
<section></section> → 削弱分区意图，不如按真实主题拆成多个为什么 <section></section> 必须配 <h2></h2>–<h6></h6>
没有标题的 <section></section> 在屏幕阅读器里不可见，在 Lighthouse 里报错，在浏览器大纲视图中显示为空节点——它失去了作为“节”的全部语义价值。
- 标题不一定要视觉可见：
<h3 class="visually-hidden">客户案例</h3> - 不能全用
<h2></h2>：父<section></section>用<h2></h2>，子节必须用<h3></h3>，跳级或平级都会破坏大纲层级 - 页面应只有一个
<h1></h1>，<section></section>内部从<h2></h2>起始 - 如果你真找不到合适标题，大概率说明它不该是
<section></section>——考虑换<div> 或删掉 <h3> <code><section></section>和<article></article>的嵌套关系怎么写一个
<article></article>可以包含多个<section></section>（如一篇教程里的「原理」「示例」「注意事项」），但反过来不行：不能让<section></section>包着整篇<article></article>作为唯一子元素。立即学习“前端免费学习笔记（深入）”；
-
<main></main>→<article></article>→ 多个<section></section>（合理） -
<main></main>→<section></section>→<article></article>（合理，如首页“最新动态”板块下并列几条新闻） -
<section></section>→<main></main>（错误，<main></main>不该被任何语义容器包裹） -
<section></section>→<nav></nav>或<footer></footer>（错误，这些标签已有完整语义，再包一层反而干扰解析）
嵌套超过两层的
<section></section>容易踩什么坑三层及以上的嵌套会让文档大纲迅速模糊，尤其当标题层级没对齐或主题粒度太细时，辅助技术和 SEO 工具基本无法提取有效结构。
- 嵌套不宜超两层：建议最多
<section></section>→<section></section>，再深就该重构主题边界 - 同级多个
<section></section>必须逻辑并列，比如「背景」「实现」「测试」，而不是「导航」「页脚」这种非主题块 - 用 CSS Grid / Flex 布局做视觉分隔，别靠多层
<section></section>实现缩进或留白 - IE8 兼容不是理由：真要支持就得上 HTML5 Shiv + 样式重置，但更现实的做法是放弃 IE8
真正难的不是怎么写
<section></section>，是写之前敢不敢问自己一句：这段内容，有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用。 -
