必须用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，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
混用时最容易被忽略的兼容性与可访问性断点
很多人以为加了 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>自动映射为banner -
<nav>映射为navigation -
<div>默认是generic，即使加了class="header"也不会变
真正难的是：当设计稿要求“一个卡片里放标题+摘要+操作按钮”，你本能想用 <div class="card"> 包住全部——但若这张卡片是一条独立新闻，它就该是 <article>；若是广告位，才考虑 <aside> 或带 role="region" 的 div。这种判断没有自动工具能替你做，只能靠对内容意图的诚实追问。
