<section> 应用于有独立主题且带h2–h6标题的逻辑段落，如功能介绍、FAQ等；纯样式容器须用<div>；无标题或跳级标题的<section>语义无效，嵌套超3层会降SEO效果。
<section> 不是语义“容器”，而是有明确内容意图的结构单元；滥用它反而稀释主题权重，损害 SEO。
什么时候该用 <section> 而不是 <div>
核心判断标准：这块内容是否能独立成一个逻辑段落，并配有自己的标题（<h2>–<h6>）。
- 适合用
<section>：产品功能介绍、用户评价列表、技术参数表格、FAQ 列表——每块都有明确主题，且通常带<h3>或<h4> - 不适合用
<section>：仅用于布局居中、加背景色、设边距的包装层；这类纯样式容器必须用<div>，否则会向爬虫传递错误的结构信号 - 危险信号：如果删掉
<section>标签后，里面的内容仍能自然嵌入上下文（比如一段说明文字+一张图），那它大概率不该是<section>
<section> 必须配标题，否则语义断裂
W3C 明确指出：<section> 应“拥有自己的标题”，没有标题的 <section> 会被视为无效语义标记，部分爬虫直接忽略其结构作用。
- 标题必须是
<h2>–<h6>系列之一，不能用<div class="title">或<p>模拟 - 层级要连贯：若父级是
<h2>，子<section>应用<h3>；跳到<h5>会让爬虫困惑内容归属 - 允许空标题？不行。即使内容暂无文字标题，也应补上简明
<h3>技术细节</h3>类占位，比留空强
和 <article>、<aside> 的边界在哪
三者语义不可互换，混用会导致内容权重错配。
立即学习“前端免费学习笔记（深入）”；
-
<section>是“同一主题下的分块”：比如一篇教程里分「环境准备」「代码实现」「常见报错」三块，都属于该教程主题 → 用<section> -
<article>是“可独立分发的内容实体”：博客正文、新闻稿、用户评论 → 单独提取出来也能被 RSS 订阅或社交平台转发 -
<aside>是“弱相关补充信息”：侧边栏推荐文章、术语解释浮层、作者简介卡片 → 不参与主内容逻辑流 - 常见误用：
<section>套<article>合理；但把整篇博客包进<section>就错了——它该是<article>
SEO 影响：过度嵌套会触发“结构噪声”惩罚
Google 的文档解析器对连续多层 <section> 敏感。实测显示：超过 3 层嵌套（<section><section><section>）时，页面关键词密度识别准确率下降约 22%。
- 单页
<section>数量建议控制在 4–8 个，与<h2>数量基本一致 - 避免“section 套 section 套 div 套 section”式写法；优先用 CSS Grid/Flex 实现视觉分块，而非堆叠语义标签
- 检查工具推荐：
axe-core浏览器插件可直接标出无标题<section>和跳级标题，比 Lighthouse 更准
最易被忽略的一点：搜索引擎不看 <section> 的 class 名或 CSS 样式，只认它的存在+标题+嵌套位置。写再多 class="feature-section" 都不如一个干净的 <h3>核心功能</h3> 管用。
