因为没有内置语义，屏幕阅读器只将其视为无意义的容器，不解析class或css，故无法识别为导航；而自带role="navigation"，被主流读屏器识别为可跳转地标并提供上下文朗读。
为什么 screen reader 会把 `` 当成普通段落
因为 <div> 没有内置语义，屏幕阅读器只把它当作“一个没意义的容器”。哪怕你加了 <code>class="nav" 或 CSS 样式，它依然不会被识别为导航区域——读屏软件根本看不到 class 名，也不解析 CSS。
真正起作用的是原生语义标签：<nav></nav> 一出现，JAWS、NVDA、VoiceOver 就立刻知道“这是导航区块”，能提供快捷跳转（如按 N 键直达）、朗读上下文（“导航栏，含 5 个链接”）。
- 用
<div> 套导航链接 → 读屏器逐条读链接，但不说明它们属于同一组
<li>换成 <code><nav></nav> → 自动归组，支持导航快捷键，还能被 Lighthouse 报告识别为“可访问结构”
- React/Vue 组件里传
role="navigation" 是次选方案，但不如原生 <nav></nav> 稳定（部分旧版读屏器对 ARIA role 支持不全）
哪些标签不能靠 class 或 style “假装”成语义元素
<div>、<code><span></span>、<section></section> 这三类最容易误用。它们要么无语义（<div>/<code><span></span>），要么有前提条件（<section></section> 必须带标题）。
典型错误：
<div class="article"> → 应直接用 <code><article></article>；否则读屏器无法判断内容是否独立可分发
-
<span class="strong">警告</span> → <strong></strong> 才表达重要性，<span></span> 加 class 只是视觉强调，读屏器不加重语气
-
<section></section> 里面没 <h2></h2>~<h6></h6> → 它就失去“主题区块”含义，Lighthouse 会报“section lacks heading”
标题跳级（h2 直连 h4）对读屏用户的真实影响
不是“少读一个标题”，而是结构感知断裂：读屏器按层级构建内容地图，<h2></h2> 后突然 <h4></h4>，等于告诉用户“你刚进的二级章节下面，直接跳到了四级子节”，中间缺了两层逻辑归属。
后果很具体：
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
- 用户按
2 键跳所有 <h2></h2>，再按 3 键想进子节——但没 <h3></h3>，按键无效，只能手动滚动找
- 某些读屏器（如早期 NVDA 版本）会静默跳过缺失层级，导致用户完全错过该区块的上下文说明
- Lighthouse 的
Heading levels should only increase by one 报错，本质是工具在模拟读屏逻辑断层
修复语义滥用时最常被忽略的兼容性细节
现代浏览器都支持 <header></header>、<main></main> 等标签，但 IE8 及更早版本会把它们当 inline 元素渲染——样式全崩，且读屏器根本不识别这些标签名。
所以老项目或需兼容旧环境时：
- 必须加 CSS 重置：
header, nav, main, section, article, aside, footer { display: block; }
- 不要依赖
<main></main> 的自动焦点管理（如按 M 键跳转），IE 下无效，得靠 JS 补充 tabindex
- 用
<section></section> 替代 <div> 时，检查是否真有标题；没有就别硬套，用 <code><div> 更诚实
<p>语义不是贴标签比赛，而是让机器和人都能按预期理解结构。最麻烦的从来不是写对标签，而是删掉那些“看起来像那么回事”的伪语义代码。</p>
</div>
因为 <div> 没有内置语义，屏幕阅读器只把它当作“一个没意义的容器”。哪怕你加了 <code>class="nav" 或 CSS 样式，它依然不会被识别为导航区域——读屏软件根本看不到 class 名，也不解析 CSS。
真正起作用的是原生语义标签：<nav></nav> 一出现，JAWS、NVDA、VoiceOver 就立刻知道“这是导航区块”，能提供快捷跳转（如按 N 键直达）、朗读上下文（“导航栏，含 5 个链接”）。
- 用
<div> 套导航链接 → 读屏器逐条读链接，但不说明它们属于同一组 <li>换成 <code><nav></nav>→ 自动归组，支持导航快捷键，还能被 Lighthouse 报告识别为“可访问结构” - React/Vue 组件里传
role="navigation"是次选方案，但不如原生<nav></nav>稳定（部分旧版读屏器对 ARIA role 支持不全） <div class="article"> → 应直接用 <code><article></article>；否则读屏器无法判断内容是否独立可分发-
<span class="strong">警告</span>→<strong></strong>才表达重要性，<span></span>加 class 只是视觉强调，读屏器不加重语气 -
<section></section>里面没<h2></h2>~<h6></h6>→ 它就失去“主题区块”含义，Lighthouse 会报“sectionlacks heading” - 用户按
2键跳所有<h2></h2>，再按3键想进子节——但没<h3></h3>，按键无效，只能手动滚动找 - 某些读屏器（如早期 NVDA 版本）会静默跳过缺失层级，导致用户完全错过该区块的上下文说明
- Lighthouse 的
Heading levels should only increase by one报错，本质是工具在模拟读屏逻辑断层 - 必须加 CSS 重置：
header, nav, main, section, article, aside, footer { display: block; } - 不要依赖
<main></main>的自动焦点管理（如按M键跳转），IE 下无效，得靠 JS 补充 tabindex - 用
<section></section>替代<div> 时，检查是否真有标题；没有就别硬套，用 <code><div> 更诚实 <p>语义不是贴标签比赛，而是让机器和人都能按预期理解结构。最麻烦的从来不是写对标签，而是删掉那些“看起来像那么回事”的伪语义代码。</p> </div>
哪些标签不能靠 class 或 style “假装”成语义元素
<div>、<code><span></span>、<section></section> 这三类最容易误用。它们要么无语义（<div>/<code><span></span>），要么有前提条件（<section></section> 必须带标题）。
典型错误：
标题跳级（h2 直连 h4）对读屏用户的真实影响
不是“少读一个标题”，而是结构感知断裂：读屏器按层级构建内容地图，<h2></h2> 后突然 <h4></h4>，等于告诉用户“你刚进的二级章节下面，直接跳到了四级子节”，中间缺了两层逻辑归属。
后果很具体：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
修复语义滥用时最常被忽略的兼容性细节
现代浏览器都支持 <header></header>、<main></main> 等标签，但 IE8 及更早版本会把它们当 inline 元素渲染——样式全崩，且读屏器根本不识别这些标签名。
所以老项目或需兼容旧环境时：
