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