<section>仅用于有明确主题、能独立成文且需标题的内容，必须配<h2>～<h6>，不可替代<div>或更具体语义标签，嵌套需层级合理，同级应逻辑并列。
<section> 不是用来“视觉分块”或“套样式”的，它只在内容有明确主题、能起标题、可被单独引用时才该用。
什么时候必须用 <section>？
核心判断就一条：这块内容抽出来，还能不能独立成文、被人理解？
- 能——比如「性能对比」「部署步骤」「用户反馈」，各自有
<h2>或<h3>标题，就该用<section> - 不能——比如轮播图的左右箭头容器、页脚里的社交媒体图标列表、仅为了加
margin的几个<p>，这些用<div>更准确 - 已有更具体语义的标签时，别退化成
<section>：导航用<nav>，文章正文用<article>，侧边栏用<aside>，页脚用<footer>
为什么必须配 <h2>～<h6>？
没有标题的 <section> 在语义上是断裂的。屏幕阅读器无法识别它的主题，浏览器文档大纲里会显示为空节点，Lighthouse 也会报错。
- 标题不一定要视觉可见，但必须存在：
<h3 class="visually-hidden">技术参数</h3>是合法且常见的做法 - 嵌套的
<section>必须保持标题层级合理：父<section>用<h2>，子节用<h3>，不能跳级或倒置 - 多个同级
<section>应逻辑并列，不是父子控制关系；否则容易让结构失焦
常见错误写法与替代方案
这些看似“方便”的写法，实际破坏语义和可访问性：
立即学习“前端免费学习笔记（深入）”；
-
<section><button>提交</button><p>请确认信息</p></section>→ 没标题、无主题，纯交互容器，用<div class="form-actions"> -
<section><nav>...</nav></section>→<nav>已有明确语义，再包一层<section>反而干扰解析 - 整个
<main>只包一个<section>→ 削弱了分区意义，不如按真实章节拆成多个<section> - 为兼容 IE8 强行用
<section>→ 老 IE 不识别该标签，JS 查不到、CSS 不继承，真要支持就得用 HTML5 Shiv + 重置样式
真正难的不是怎么写 <section>，而是写之前先想清楚：这段内容有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用。
