必须配～标题，表示有明确主题、可独立成文且能被导航引用的内容区块；不可滥用为样式容器，否则破坏语义与无障碍体验。

用 <section></section> 划分独立内容的前提是：这块内容有明确主题、能起标题、可被单独引用或跳转。不是所有“视觉上分开”的区域都该用 <section></section>，硬套反而破坏语义和辅助访问体验。

什么时候必须加 <h2></h2>–<h6></h6> 才能用 <section></section>

浏览器和屏幕阅读器把 <section></section> 当作一个“可导航的章节”，没标题就等于告诉它们：“这里有个空章节”。常见错误包括：

• 只放一张图+按钮的轮播控制区，外面包了 <section></section> 却没标题
• 仪表盘里“今日订单数”卡片用了 <section></section>，但里面只有 <div> 和 <code><p></p>
• 页脚整体写成 <section class="footer"></section>，其实它该用 <footer></footer>

正确做法是：每个 <section></section> 开头必须有且仅有一个 <h2></h2>–<h6></h6>（按嵌套层级递进），比如 <h2>用户活跃趋势</h2> 或 <h3>实验结果分析</h3>。

<section></section> 和 <article></article> 到底怎么选

两者都强调“独立”，但独立的角度不同：

• <section></section> 是“文档结构上的独立”——比如一篇教程里的「环境准备」「代码实现」「调试技巧」三个部分，各自是 <section></section>，合起来才是一篇完整内容
• <article></article> 是“内容意义上的独立”——比如博客首页列出的 5 篇技术文，每篇都能被 RSS 抓取、单独分享、脱离当前页面存在
• 一个 <article></article> 内部可以有多个 <section></section>；但不要用 <article></article> 去包“产品介绍”“客户评价”这种同属一页主内容的模块

为什么不用 <div> 替代 <code><section></section>？

不是不能用，而是放弃语义代价：

• SEO：搜索引擎会弱化无标题 <section></section> 的权重，但完全忽略纯 <div> 的结构信号 <li>无障碍：屏幕阅读器支持 <code><section></section> 的“跳到下一节”快捷键，<div> 没这个能力 <li>维护成本：三个月后你回看代码，<code><section id="faq"></section> 比 <div class="block-4"> 更容易理解用途 <li>真需要样式容器？优先用 <code><div> + 语义类名，比如 <code><div class="carousel-controls">，而不是给它硬套 <code><section></section>

  最容易被忽略的一点：语义标签不是“越多越好”，而是“刚好够用”。一个没有标题、不构成逻辑章节、也不打算被外部引用的内容块，就老实用 <div> ——它的存在本身，就是一种诚实的设计选择。</div>