section是语义容器而非布局容器，划分依据是内容主题是否独立可命名且能作为大纲一级条目、支持锚点跳转、脱离页面仍具完整语义；无标题的section语义等同div，必须配h2-h6标题（可视觉隐藏），同级section须并列，嵌套时标题需降级；轮播图、导航等应选div、nav等更准确标签。
section 标签不是布局容器，它是语义容器——切分依据是“内容主题是否独立可命名”，不是“视觉上要不要分块”。
区分“能切”和“该切”的关键
一块内容视觉上被隔开，不等于它该用 <section></section>。真正该切的，是那些：
- 能被单独起名（如“客户案例”“部署指南”“性能对比”）
- 在文档大纲里会作为一级条目出现
- 支持锚点跳转（比如
#user-feedback直达该区块） - 脱离当前页面仍能表达完整主题意图
标题不是装饰，是语义刚需
没有 <h2></h2>～<h6></h6> 的 <section></section> 在语义上等同于 <div>，只是多写了几个字符。实际影响包括：
<ul>
<li>屏幕阅读器无法识别其结构层级，可能跳过或降级处理</li>
<li>Lighthouse 检测直接报“section without heading”错误</li>
<li>浏览器大纲视图中显示为空节点</li>
<li>SEO 工具难以提取有效结构信息</li>
</ul>
<p>标题可以视觉隐藏（用 <code>class="visually-hidden"），但不能省略语义元素。
嵌套与并列的层级逻辑
同一级的多个 <section></section> 应为并列关系，有清晰的主题边界：
- ✅ 正确：
核心功能
客户案例
- ❌ 错误：整个页面只包一个
，再把所有内容塞进去 - ⚠️ 注意：子
<section></section>必须用更低一级标题（父用<h2></h2>，子用<h3></h3>），不能跳级或平级
什么时候该换 div 或其他标签
以下情况不用 <section></section>，选更准确的语义标签或退回到 <div>：
<ul><li>轮播图外层、下拉菜单容器、模态框包装盒 → 用 <code><div> + class
<li>整页主导航、页脚社交图标栏 → 用 <code><nav></nav> 或 <footer></footer>
<article></article>
<aside></aside>
