section 必须含 h2–h6 标题才具语义，否则等同 div；div 明示“无语义”，适用于布局、JS 钩子等；错误嵌套或标题层级混乱会破坏可访问性与 SEO。
别纠结“哪个更现代”，section 和 div 功能完全一样，选错只会影响 SEO、屏幕阅读器识别和团队协作理解——关键看这块内容有没有标题、能不能被一句话概括。
没标题的 section 就是废标签
W3C 明确建议每个 section 必须含 h2–h6 标题，否则它在语义上等同于 div，但多占一个标签、误导维护者、触发 Lighthouse 可访问性警告。
- 错误写法：
<section><p>加载中...</p><div class="spinner"></div></section>—— 没主题、没标题，纯 UI 容器 - 正确写法：
<section><h3>用户反馈</h3><p>“响应超快！”</p></section>—— 有明确主题，标题在内部即可（不强制紧贴开头） - 视觉隐藏标题也合法：
<h3 class="visually-hidden">推荐商品</h3>，只要 DOM 中存在且可被辅助技术读取
用 div 的典型场景：纯布局、JS 钩子、无主题 UI
div 不是过时标签，而是唯一一个**明示“此处无语义”** 的容器。它的价值恰恰在于“不说话”。
- CSS Grid/Flex 直接父容器：
<div class="grid-container">—— 排版需要，无关内容结构 - 模态框外层：
<div id="modal-overlay">或<div data-js="chart-root">—— JS 操作锚点，无需语义 - 轮播图控制按钮、下拉菜单、SVG 包裹层 —— 这些是交互组件，不是文档章节
- 类名带
section也不代表该用section标签，比如<div class="product-section">仍是合法的div
嵌套 section 很容易踩坑
浏览器大纲视图和读屏器会把每个 section 当作独立层级节点。嵌套过深或标题层级错乱，会导致语义结构断裂。
立即学习“前端免费学习笔记（深入）”；
- 禁止全用
h1：<section><h1>产品介绍</h1><section><h1>核心功能</h1></section></section>—— 子section应用h2或更低 - 避免三层及以上嵌套：
<section><section><section>—— 大概率说明你该用article或重构逻辑分组 - 页脚、导航栏、侧边栏整块不用
section—— 它们有更合适的语义标签：<footer>、<nav>、<aside>
最常被忽略的一点：你改一个 section 标签，可能不会让页面看起来有任何变化，但会立刻影响 Lighthouse 的可访问性评分、NVDA 的导航节点列表、甚至 Google 抓取时对主次内容的权重分配——语义不是“锦上添花”，是结构基础设施的一部分。
