必须用header、nav、main而非div的场景是当结构有明确功能意图时：header用于页面或section/article头部，nav仅包裹页面级主要导航，main每个页面有且仅有一个并代表主体内容。
什么时候必须用 header、nav、main 而不是 div
当结构有明确功能意图时，不能用 div 替代。比如页面顶部导航区，写成 <div class="nav"></div> 会让屏幕阅读器只读作“division”，无法触发“跳至导航”快捷键；搜索引擎也收不到“这是主导航”的信号。
以下场景必须用语义标签：
-
header：用于整个页面或某个section/article的头部，含 logo、主标题、主导航等 -
nav：仅包裹页面级主要导航（如顶部菜单、侧边全局导航），面包屑、页脚链接、文章内“上一篇/下一篇”不算 -
main：每个页面有且仅有一个，代表主体内容区域，不可嵌套在article或section内部 -
article：独立可分发、可复用的内容单元（如博客条目、新闻稿），自带隐式aria-roledescription="article"
div 还能不能用？能，但得满足三个硬条件
不是所有 div 都有害——它仍是合法的通用容器，但必须确保不干扰语义流。关键看它是否承担「内容角色」。
安全使用 div 的前提：
- 仅作为 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。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
混用时最容易被忽略的兼容性与可访问性断点
很多人以为加了 role 就万事大吉，其实不是。比如写 <div role="navigation"></div>，虽然 NVDA 能识别为导航区，但它不会自动继承 nav 的键盘快捷支持（如 Ctrl+Alt+N），也不像原生 nav 那样在辅助功能树中显示为 navigation 节点。
真实排查建议：
- 关掉所有 CSS，用 Tab 键遍历页面：如果导航链接前要按 12 次 Tab 才到，大概率是语义层级断裂
- 打开 Chrome DevTools → Elements → 右键节点 → Inspect Accessibility Properties：看是否大量出现
generic类型，或本该是banner的节点被标记为complementary - 检查
h1–h6是否被无意义div隔开：比如h2后紧跟一个空div，再跟h4，这会破坏大纲层级，影响 SEO 和阅读器跳转逻辑
检查语义是否被悄悄破坏的最简方法
别依赖肉眼渲染效果，直接用浏览器原生能力验证：
打开 Chrome DevTools → 切换到 Accessibility 面板 → 点击左上角「Enable accessibility tree」→ 展开节点看 role 类型。你会发现：
-
<header></header>自动映射为banner -
<nav></nav>映射为navigation <div> 默认是 <code>generic，即使加了class="header"也不会变真正难的是：当设计稿要求“一个卡片里放标题+摘要+操作按钮”，你本能想用
<div class="card"> 包住全部——但若这张卡片是一条独立新闻，它就该是 <code><article></article>；若是广告位，才考虑<aside></aside>或带role="region"的div。这种判断没有自动工具能替你做，只能靠对内容意图的诚实追问。
