section与div无父子关系，语义分工不同：section表主题内容，div仅用于样式/交互；section内可含div（如网格容器），但div内不应包section（除非JS锚点）；section可嵌套，需符合标题层级逻辑。
section 和 div 不是父子关系，也没有强制嵌套规则——它们是语义分工不同的两类标签，该谁包谁，取决于内容逻辑，而不是语法层级。
section 里可以放 div
只要 div 是为样式、交互或布局服务，且不承载独立主题，它就天然适合出现在 section 内部。
- 比如一个「产品特性」section，里面用 div 做卡片网格容器：
<section><h2>核心功能</h2><div class="grid"><div class="card">…</div></div></section> - div 在这里只负责排列视觉结构，不改变 section 的主题性，完全合理
- 常见场景还包括：section 内的轮播图外层、表单分组 wrapper、动画触发容器
div 里不能放 section（除非有明确理由）
div 本身无语义，不能作为主题内容的“上层容器”。如果 section 出现在 div 里，往往说明这个 div 其实不该存在，或者 section 放错了位置。
- 错误示例：
<div class="wrapper"><section><h3>用户反馈</h3><p>…</p></section></div>——wrapper 这个 div 没有语义价值，纯属冗余 - 正确做法：去掉 div，让 section 直接作为文档流中的逻辑单元；或把 wrapper 改成更准确的语义标签（如
<main>、<article>） - 唯一可接受的例外：div 作为 JS 渲染锚点（如
<div id="app"></div>），此时内部由框架动态生成 section —— 但这是运行时行为，不是手写 HTML 的推荐结构
section 可以嵌套 section，但必须有层级逻辑
嵌套不是语法允许就等于合理，而是要体现真实的“章节-子章节”关系，标题层级必须递进。
立即学习“前端免费学习笔记（深入）”；
- 父级用
<h2>，子级必须用<h3>或更低，不能全用<h2> - 例如：
<section><h2>部署指南</h2><section><h3>本地环境</h3></section><section><h3>生产环境</h3></section></section> - 如果嵌套后各子 section 主题松散、无法归入同一父主题，就该平级并列，而非嵌套
别让 div 成为 section 的“语义中转站”
有些团队习惯先用 div 搭骨架，再把 section 往里塞——这违背了语义优先原则。HTML 结构应从内容出发，而不是从 CSS 类名或 JS 需求倒推。
- 看到
<div class="section">就该警觉：类名带 “section” 不代表它该是<section> - 判断依据永远是：这段内容有没有独立主题？能不能被单独命名、摘要、跳转？
- 没有标题的 section，无论嵌在哪一层，都等同于 div —— 多写的标签反而干扰结构解析
