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