<section>不是视觉分块工具，仅用于可命名、入大纲、有明确主题的内容；必须含至少一个<h1>-<h6>标题，否则语义丢失、Lighthouse报错、大纲为空。
直接说结论：<section></section>不是用来“视觉分块”的，它只在内容能被单独命名、放进文档大纲、且有明确主题时才该用；没标题的<section></section>等于废标签，语义全丢。
什么时候必须配 <h2></h2>～<h6></h6>？
每个<section></section>都必须至少包含一个<h2></h2>到<h6></h6>（不能是<h1></h1>），否则它在屏幕阅读器里不可见，Lighthouse 会报“Missing heading for section”错误，浏览器大纲视图里显示为空节点。
- 标题可以视觉隐藏：
<h3 class="visually-hidden">技术参数</h3>完全合法，也常见于仪表盘卡片标题 - 父
<section></section>用<h2></h2>，子节必须用<h3></h3>，不能全用<h2></h2>或跳成<h4></h4> - 整页只有一个
<h1></h1>，这是硬规则；<section></section>内推荐从<h2></h2>起始
哪些内容适合套 <section></section>？
核心判断标准：删掉这块内容，剩下部分是否仍逻辑自洽？能不能被人指着说“看第三 <section></section> 的性能对比”？
- 文章里的「背景」「实现」「测试」——并列、可命名、有主题
- 产品页的「核心功能」「客户评价」「技术参数」——各自带
<h2></h2>，彼此独立 - 仪表盘中的「活跃趋势」「订单统计」「用户留存」——可跳转、可引用、常被单独渲染
- FAQ 页面按主题分组，比如「账户安全」「支付问题」「退款政策」
哪些情况坚决别用 <section></section>？
滥用最常见于把语义容器当样式盒子用，结果破坏可访问性、稀释 SEO 权重。
立即学习“前端免费学习笔记（深入）”；
- 轮播图的左右箭头容器：
<div class="carousel-controls"></div>更准确 - 页脚里的社交媒体图标列表：已有
<footer></footer>，再包<section></section>是语义退化 - 纯为加 margin 或触发动画的几个
<p></p>：诚实点，用<div class="spacing-block"></div> - 整个
<main></main>只包一个<section></section>：等于没分区，不如按真实逻辑拆成多个 -
<section></section>里硬塞<nav></nav>或<aside></aside>：这些已有专属语义，再套一层反而干扰解析
嵌套超过两层为什么危险？
不是语法错误，而是结构失焦——人和机器都难快速定位信息层级。
- 三层嵌套（
<section></section>><section></section>><section></section>）会让屏幕阅读器朗读顺序混乱，尤其在移动端 - 同级多个
<section></section>必须逻辑并列，不能是“导航 → 子菜单 → 按钮组”这种控制流关系 - 如果发现需要三层，大概率说明中间某层该换标签：比如子节其实是独立新闻条目，就该用
<article></article>而非<section></section>
真正难的不是怎么写<section></section>，而是写之前先问自己：这段内容有没有资格出现在文档大纲里？如果连标题都想不出来，那就别用——<div>不是耻辱，是诚实。</div>
