section 表示有主题、带标题的独立内容单元，浏览器和辅助技术将其视为逻辑单元；div 是无语义纯容器，仅用于样式或脚本挂载。

div 和 section 的语义区别到底在哪

不是“哪个更好用”，而是“浏览器和辅助技术怎么理解它”。div 是纯容器，不带任何含义；section 表示文档中一个有主题的独立部分，必须自带标题（

–

• 搜索引擎、屏幕阅读器会把 section 当作一个逻辑单元处理，div 则完全忽略
• section 不能用于单纯样式分组或 JS 挂载点——那是 div 或 span 的职责
• 如果一段内容删掉后不影响整体结构完整性，大概率不该用 section

什么时候必须用 section 而不是 div

当该区域满足「主题明确 + 可被单独引用 + 有层级标题」三个条件时，section 才成立。比如文章目录页的每个章节、产品页的「核心功能」「客户案例」「技术参数」区块。

• 错误用法：
  —— 导航栏不是内容主题，用 nav 更准确
• 错误用法：
  —— 纯为 JS 控制而设，无语义，应改用 div
• 正确用法：

  兼容性说明
  支持 Chrome 90+…

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 反而会让结构更难懂。