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