<section>是 HTML5 引入的语义化区块标签，用来标记文档中逻辑上独立、主题相关的内容块。简单说：看到<section>就知道“这里面是一小块完整的内容”。
核心特征（一句话版本）
- 必须有标题：每个
<section>内通常要包含至少一个<h1>到<h6>标题，否则应该用<div>。 - 可嵌套：Section 里可以再套 Section，表示子章节。
- 不是
<div>：<div>是通用容器，无意义；<section>有明确语义，表示“独立内容区”。
典型使用场景
<!-- ✅ 正确用法：文章章节 --><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><!-- ❌ 错误用法：仅为样式 --><sectionclass="wrapper"><!-- 应该用 <div> --><div>内容</div></section>与<div>的快速区分法则
| 问题 | 用<section> | 用<div> |
|---|---|---|
| 内容是否有独立标题？ | ✅ 是 | ❌ 否 |
| 是否只是为了布局和样式？ | ❌ 否 | ✅ 是 |
| 屏幕阅读器会把它当独立区块播报？ | ✅ 会 | ❌ 不会 |
一句话记忆
“有标题的独立内容块用 section，纯容器用 div。”
在 HTML 大纲（outline）算法里，每个<section>都会生成一个隐式区块，有助于 SEO 和无障碍访问。但别为了“语义”而过度使用——如果内容不够独立，还是用<div>更干净。
