HTML5语义标签：section的正确用法

float_六七2026-01-17 10:50

<section> 是 HTML5 引入的语义化区块标签 ，用来标记文档中逻辑上独立、主题相关 的内容块。简单说：看到 <section> 就知道"这里面是一小块完整的内容"。

核心特征（一句话版本）

必须有标题 ：每个 <section> 内通常要包含至少一个 <h1> 到 <h6> 标题，否则应该用 <div>。
可嵌套：Section 里可以再套 Section，表示子章节。
不是 <div> ：<div> 是通用容器，无意义；<section> 有明确语义，表示"独立内容区"。

典型使用场景

html 复制代码

<!-- ✅ 正确用法：文章章节 -->
<article>
  <h1>JavaScript 入门</h1>
  <section>
    <h2>变量声明</h2>
    <p>let 和 const 的区别...</p>
  </section>
  <section>
    <h2>函数定义</h2>
    <p>箭头函数与普通函数...</p>
  </section>
</article>

<!-- ✅ 正确用法：搜索结果 -->
<section>
  <h2>搜索结果</h2>
  <ul>
    <li>结果1</li>
    <li>结果2</li>
  </ul>
</section>

<!-- ❌ 错误用法：仅为样式 -->
<section class="wrapper">  <!-- 应该用 <div> -->
  <div>内容</div>
</section>

与 <div> 的快速区分法则

问题	用 `<section>`	用 `<div>`
内容是否有独立标题？	✅ 是	❌ 否
是否只是为了布局和样式？	❌ 否	✅ 是
屏幕阅读器会把它当独立区块播报？	✅ 会	❌ 不会

一句话记忆
"有标题的独立内容块用 section，纯容器用 div。"

在 HTML 大纲（outline）算法里，每个 <section> 都会生成一个隐式区块，有助于 SEO 和无障碍访问。但别为了"语义"而过度使用------如果内容不够独立，还是用 <div> 更干净。