必须用header、nav、main而非div的场景是当结构有明确功能意图时：header用于页面或section/article头部，nav仅包裹页面级主要导航，main每个页面有且仅有一个并代表主体内容；div仅可作为CSS布局层、语义标签内部样式隔离层或动态框架占位点，且不得干扰语义流。
div 和语义化标签不是二选一，而是分层协作：语义标签定结构角色，div 做样式隔离或布局微调，但必须守住“不干扰语义流”这条线。
什么时候必须用 header、nav、main 而不是 div
当结构有明确功能意图时，div 不能替代。比如页面顶部导航区写成 <div class="nav"></div>，屏幕阅读器只会读作“division”，不会触发 Ctrl+Alt+N 快捷跳转；搜索引擎也收不到“这是主导航”的信号。
-
header：用于整个页面或某个section/article的头部（含 logo、主标题、主导航），不能只为了加 margin 就套一层 -
nav：仅包裹页面级主要导航（如顶部菜单、左侧全局导航），面包屑、页脚链接、“上一篇/下一篇”不算 -
main：每个页面有且仅有一个，代表主体内容区域，不可嵌套在article或section内部
div 还能用吗？能，但得满足三个硬条件
div 仍是合法的通用容器，但它不参与语义层级——只在不破坏语义的前提下充当“CSS把手”或“JS操作靶点”。
- 仅作为 CSS 布局层：例如
<main><div class="grid-container"></div></main>，这个div不撑语义，只控制子元素排列 - 在已有语义标签内部做样式隔离：如
<article><div class="article-body"><p></p></div></article>，前提是没把h1或figure包错层 - 动态框架占位：如 React 的
<div id="root"></div>，完全脱离文档语义流，合理
危险信号：div 包裹了多个 h2 却没用 section；div class="card" 实际承载一条新闻却没升级为 article。
立即学习“前端免费学习笔记（深入）”；
混合使用时最容易被忽略的兼容性与可访问性断点
很多人以为加了 role 就万事大吉，其实不是。比如写 <div role="navigation"></div>，虽然 NVDA 能识别为导航区，但它不会自动继承原生 nav 的键盘快捷支持（如 Ctrl+Alt+N），也不像原生 nav 那样在辅助功能树中显示为 navigation 节点。
- 原生语义标签自带隐式
aria-roledescription和焦点管理逻辑，role只是补丁，不是等价替换 - IE9+ 需显式声明
header, nav, main, article, aside, footer { display: block; }，否则不渲染为块级 - Flex/Grid 布局中，
div仍可作为 flex 容器，但若它本该是nav，就别用div+role="navigation"代替
真正难的不是记住哪些标签该用，而是每次写 div 前问一句：它在这里承担的是“内容角色”，还是“样式/交互把手”？一旦混淆，可访问性和维护成本就会悄悄翻倍。
