语义化标签是具有明确含义的HTML元素，用于准确表达内容结构与用途，提升可读性、SEO效果和无障碍访问能力。
语义化标签不是“让页面更漂亮”的装饰，而是直接决定屏幕阅读器能否把网页当成人话来读——<nav></nav>能跳转，<main></main>能定位正文，<time></time>能识别日期并朗读成“二零二五年九月十二日”，而<div class="nav">在读屏软件里就是一块沉默的空白。
<h3>为什么<code><nav></nav>能跳、<div class="nav">不能跳
<p>屏幕阅读器不解析 CSS 类名，也不猜测开发者意图。它只信任原生语义或显式 ARIA 角色。</p>
<ul>
<li>
<code><nav></nav>自带 role="navigation"，NVDA/VoiceOver/JAWS 都把它识别为地标（landmark），支持快捷键跳转（如 NVDA 的 Insert + N）
<div class="nav"> 的 computed role 是 <code>generic，读屏器只当它是空容器，连“导航”两个字都不会提
<nav></nav> 必须加 aria-label 区分，否则全叫“导航”，用户分不清主导航、页脚导航还是面包屑<nav></nav> 必须包裹可聚焦元素（如 <a></a>、<button></button>），不能只放纯文本
<main></main>缺失时，正文在哪得靠猜
几乎所有主流屏幕阅读器把 <main></main> 当作“页面主体内容”的唯一可信锚点。没它，系统只能退而求其次：
- 先找
role="main" - 再找不到，就从第一个
<h1></h1>开始算正文——但页眉里可能已有<h1></h1>，结果用户按“跳到主要内容”后听到的是 Logo 文字 -
<main></main>必须是的直接子元素，且全页只能有一个 - 不能嵌套在
<header></header>、<footer></footer>、<nav></nav>或<section></section>内部 - React/Vue 项目中常见错误：
<div id="app"> 包全局，但子组件里漏了 <code><main></main><time></time>、<address></address>、<figure></figure>这些小标签真有用它们提供的不是视觉效果，而是机器可解析的元数据，直接影响读屏器怎么“说”和搜索引擎怎么“抓”：
立即学习“前端免费学习笔记（深入）”；
-
<time datetime="2025-09-12T14:30"></time>被识别为时间类型，VoiceOver 可能朗读为“下午两点三十分”，长按还能复制；写成“2025年9月12日”就只是普通字符串 -
<address></address>仅适用于最近的<article></article>或级别的联系信息，不是所有“地址”都要套 -
<figure></figure>+<figcaption></figcaption>是图片/图表的最小语义单元；缺<figcaption></figcaption>，读屏器大概率跳过说明文字 -
<h1></h1>到<h6></h6>必须严格递进，跳级（比如<h2></h2>后接<h4></h4>）会让读屏器误判结构层级，用户无法建立稳定认知地图
真正难的不是记住哪些标签该用，而是理解：每个语义标签都在向辅助技术提交一份“结构声明”。漏掉一个
<main></main>，正文就没了坐标；错用一个<div role="button"> 却忘了 <code>tabindex="0"，键盘用户就卡在那儿动不了——这些都不是样式问题，是可访问性树的断裂点。 -
