<nav>能让屏幕阅读器用户按N键直接跳入，因其自带role="navigation"并被主流读屏器识别为可跳转地标；而<div class="nav">无此能力，需手动补全ARIA属性才能模拟。
<nav></nav> 能让屏幕阅读器用户按 N 键直接跳入，<main></main> 缺失会导致他们从页眉
开始盲扫 7–12 次才摸到正文——这不是体验问题，是功能缺失。搜索引擎同理：它不“读”页面，而是解析语义锚点来分配内容权重。
为什么 <nav></nav> 比 <div class="nav"> 多出一个可跳转能力
<p>屏幕阅读器不解析 CSS 类名，只信任原生语义或显式 ARIA。写 <code><div class="nav">，它就真当那是普通容器，连“导航”两个字都不会提；而 <code><nav></nav> 自带 role="navigation"，NVDA/VoiceOver/JAWS 都把它识别为地标（landmark），支持快捷键跳转。
- 多个
<nav></nav> 必须加 aria-label 区分，否则全叫“导航”，用户分不清主导航、页脚导航还是面包屑
-
<nav></nav> 只适用于**主要导航路径**（如顶部菜单、分页），不是所有链接组都适用
- 嵌套在
<header></header> 里 ≠ 自动语义化：<header><div class="nav"> 仍等于零语义
<h3>
<code><main></main> 缺失或误用会怎样
<nav></nav> 比 <div class="nav"> 多出一个可跳转能力
<p>屏幕阅读器不解析 CSS 类名，只信任原生语义或显式 ARIA。写 <code><div class="nav">，它就真当那是普通容器，连“导航”两个字都不会提；而 <code><nav></nav> 自带 role="navigation"，NVDA/VoiceOver/JAWS 都把它识别为地标（landmark），支持快捷键跳转。
- 多个
<nav></nav>必须加aria-label区分，否则全叫“导航”，用户分不清主导航、页脚导航还是面包屑 -
<nav></nav>只适用于**主要导航路径**（如顶部菜单、分页），不是所有链接组都适用 - 嵌套在
<header></header>里 ≠ 自动语义化：<header><div class="nav"> 仍等于零语义 <h3> <code><main></main>缺失或误用会怎样
几乎所有屏幕阅读器把 <main></main> 当作“页面主体内容”的唯一可信锚点。没它，系统退而求其次找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里也可能有 <h1></h1>，结果用户下拉多次才触达真正内容。
- 硬约束：
<main></main>一个页面只能有一个，且不能出现在<article></article>、<aside></aside>、<footer></footer>、<header></header>或<nav></nav>内部 - React/Vue 项目中常见漏项：
<div id="app"> 包住整个应用，却忘了在内部放 <code><main></main> - 用
<section></section>替代<main></main>→ 丢失“这是本页最核心信息”的语义声明，SEO 和 a11y 同时受损 - 标题不用
<div class="title">，改用 <code><h1></h1>–<h6></h6>（层级必须连续，不能跳级） - 段落不用
<div>文字</div>，改用<p></p>（否则读屏器可能把几段连成一句） - 列表不用嵌套
<div> 模拟，改用 <code><ul></ul>/<ol></ol>/<li>（否则无法识别项数与层级） -
<article></article>用于可独立存在与分发的内容（如博客正文、新闻稿），不是所有“看起来像文章”的区块都该用它
哪些标签一换就能解决“读不出”“抓不到”问题
很多“屏幕阅读器读不出”或“搜索引擎抓不准”，本质是用了无语义容器替代结构化元素。直接替换效果立竿见影：
立即学习“前端免费学习笔记（深入）”；
真正难的不是记住标签名，而是每次写 HTML 时多问一句：“如果去掉所有 CSS，这个标签还能让机器和人立刻明白这块内容的角色吗？”——语义化失效，往往始于一次“先写了再说”的妥协。
