section 表示有主题、带标题的独立内容单元，浏览器和辅助技术将其视为逻辑单元；div 是无语义纯容器，仅用于样式或脚本挂载。
div 和 section 的语义区别到底在哪
不是“哪个更好用”，而是“浏览器和辅助技术怎么理解它”。div 是纯容器，不带任何含义；section 表示文档中一个有主题的独立部分，必须自带标题（<h1>–<h6>），否则语义失效。
-
搜索引擎、屏幕阅读器会把
section当作一个逻辑单元处理，div则完全忽略 -
section不能用于单纯样式分组或 JS 挂载点——那是div或span的职责 - 如果一段内容删掉后不影响整体结构完整性，大概率不该用
section
什么时候必须用 section 而不是 div
当该区域满足「主题明确 + 可被单独引用 + 有层级标题」三个条件时，section 才成立。比如文章目录页的每个章节、产品页的「核心功能」「客户案例」「技术参数」区块。
- 错误用法：
<section class="header-nav"></section>
—— 导航栏不是内容主题，用nav更准确 - 错误用法：
<section id="js-slider-container"></section>
—— 纯为 JS 控制而设，无语义，应改用div - 正确用法：
<section><h2>兼容性说明</h2><p>支持 Chrome 90+…</p></section>
aside、article、main 这些标签和 div 怎么配合布局
它们不是 div 的替代品，而是分工明确的语义构件：main 表示页面主体内容唯一区域；article 是可独立分发的内容单元（如一篇博客）；aside 是与当前内容相关但非核心的补充信息（如侧边栏推荐、术语解释）。
-
div依然大量存在：用于包裹article内部的样式层、栅格容器、动画 wrapper 等 - 不要为了“语义化”强行嵌套：比如
article > div > section是常见且合理写法，div在这里只是布局辅助 - 浏览器对
main有隐式 ARIA 角色（main），但只允许出现一次；多个main会导致可访问性工具报错
实际项目中怎么快速判断该用哪个标签
问自己三个问题，按顺序判断：
立即学习“前端免费学习笔记（深入）”；
- 这个区域是否承载独立主题内容？→ 是 → 看是否有标题 → 有 → 用
section；无 → 补标题或改用div - 这个区域是否属于导航、侧边、页脚等通用结构？→ 是 → 优先用
nav/aside/footer - 这个区域只是为样式、JS、响应式断点服务？→ 是 → 一律用
div，别硬套语义标签
语义标签的价值不在“看起来更标准”，而在可访问性、SEO 基础支持和长期维护时的结构自解释性。强行替换 div 反而会让结构更难懂。
