section 表达有主题、可独立理解的内容区域，必须含标题；div 是无语义布局容器，仅用于样式或脚本。滥用 section 会破坏语义结构。
section 和 div 的语义区别到底在哪
别再用 div 套 div 模拟“头部”“文章”“侧边栏”了——HTML5 的 section 不是 div 的升级版，它不负责样式，只负责表达“这里是一块有主题的、可独立理解的内容区域”。浏览器和读屏器靠这个识别结构，SEO 也据此判断内容权重。
关键判断标准：这块内容抽出来，还能不能被单独理解？有没有一个明确的主题或功能？
- 能：用
section（比如“用户评论区”“产品特性列表”） - 不能：只是为样式或 JS 绑定加的容器，就该用
div - 有固定语义的专用区域（如导航、页脚、文章主体）：优先用
nav、footer、article，而不是退化成section
什么时候必须用 section，什么时候坚决不能用
section 不是万能区块标签。滥用反而破坏语义，让结构更混乱。
- ✅ 应该用：
<section> <h2>性能优化建议</h2> <p>减少重排重绘…</p> <ul><li>使用 transform 替代 top/left</li></ul> </section>
——有明确标题、内容自成一体 - ❌ 禁止用：
<section class="container"></section>
——没标题、无主题、纯为居中或清浮动，这就是div的活 - ⚠️ 容易错：
section里必须有标题（h1–h6），否则语义断裂；如果只是分组几段无关段落，用div更诚实
div 还有没有存在的必要
有，而且非常必要。HTML5 没淘汰 div，只是明确了它的定位：纯粹的、无语义的布局容器。
立即学习“前端免费学习笔记（深入）”；
- 需要加 CSS 类控制栅格布局（如
class="row"/class="col-6"）→div - 为 JavaScript 提供操作锚点（如
id="modal-overlay"）→div - 包裹一组元素仅用于过渡动画或显示/隐藏控制 →
div - 嵌套在
section内部做样式隔离（比如section > div.card）→ 合理且常见
强行把所有 div 换成 section，就像给螺丝刀标上“锤子”标签——工具没变，但用法全错。
实际页面结构怎么分才不踩坑
一个典型博客页的合理划分示例（注意层级与标题嵌套）：
<header> <h1>我的技术博客</h1> </header> <p><main> <article> <h2>CSS Grid 布局实战</h2> <p>本文详解…</p> </article></p><p><section> <h2>相关文章</h2> <ul><li><a href="#">Flex 与 Grid 对比</a></li></ul> </section></p><p><section> <h2>读者评论</h2> <form>…</form> <div id="comments-list"></div> <!-- 无语义容器，用 div --> </section> </main></p><p><aside> <h2>作者简介</h2> <p>前端工程师，专注…</p> </aside></p><p><footer> <p>© 2024 All rights reserved.</p> </footer>
重点不是标签数量，而是每个 section 是否承载可命名的主题，以及是否真有对应标题。没标题的 section，删掉它，换回 div ——这是最常被忽略的硬性规则。
