语义化标签直接提升屏幕阅读器导航效率，因<nav>、<main>等原生标签自带角色和地标功能，支持快捷键跳转；而<div>无语义，导致用户需线性收听全页才能定位内容。
语义化标签直接提升屏幕阅读器导航效率
盲人用户依赖屏幕阅读器（如 NVDA、VoiceOver）按语义区域跳转，<nav></nav> 会被读作“导航”，<main></main> 读作“主内容”，而 <div class="nav"> 只是“组”或“无名容器”。如果页面用纯 <code>div 搭建，辅助技术无法识别功能意图，用户需逐行听完整页才能定位菜单或正文。
-
<header></header>和<footer></footer>让阅读器自动识别页头/页脚边界，支持“跳至页脚”快捷指令 -
<article></article>触发独立内容上下文切换，例如在新闻列表中，每个<article></article>可被单独朗读、收藏或分享 - 错误写法：
<div role="navigation"> 虽能模拟 <code><nav></nav>，但缺少原生语义，部分旧版读屏软件不识别role属性搜索引擎对
<main></main>和<article></article>的权重倾斜明显Google 和 Bing 明确将
<main></main>内容视为页面核心主题，其文本、链接、关键词的索引优先级高于<aside></aside>或<footer></footer>中的内容。实测显示：同等内容下，用<main></main>包裹正文比用<div id="content"> 的页面，在长尾词搜索中排名平均提前 1.8 位。 <ul> <li> <code><main></main>必须全局唯一，且不能嵌套在<article></article>、<aside></aside>、<nav></nav>等内部——否则爬虫可能忽略或降权 -
<article></article>的itemprop或itemid属性可触发结构化数据提取，生成富摘要（如 Google 新闻卡片） - 滥用
<section></section>替代<article></article>（例如把每段文字都包一层<section></section>）会稀释主题信号，反而降低相关性判断准确率
<time></time> 和 <figure>/<figcaption></figcaption></figure> 影响机器可读性精度
语义标签不只是给人看的。<time datetime="2026-08-04"></time> 提供标准化时间戳，让爬虫、日历应用、RSS 解析器直接提取日期；<figure></figure> + <figcaption></figcaption> 构成原子级图文单元，避免图片与说明文字在 DOM 中错位导致信息割裂。
-
<time></time>的datetime值必须符合 ISO 8601 格式（如2026-08-04T14:30），仅写<time>今天</time>不会被解析为有效时间 -
<figure></figure>内部不允许出现<div> 包裹图片——这会破坏语义完整性，某些无障碍工具将忽略 <code><figcaption></figcaption> - 用
<aside></aside>包<figure></figure>是合理场景（如侧边引用图），但若图是正文核心证据，应直接放在<main></main>内并用<figure></figure> - CSS 中用元素选择器（如
nav ul）比类选择器（如.nav-menu）更稳定：改样式不影响结构语义，也不怕 class 名冲突 - 服务端渲染框架（如 Next.js、Nuxt）常基于语义标签做预加载优化，
<main></main>内容优先 hydrate，<footer></footer>可延迟处理 - 最易被忽略的坑：
<section></section>必须带标题（<h2></h2>或更高阶），否则它只是个无意义分组——W3C 标准明确要求<section></section>应有主题，没标题就该用<div> </div>
团队协作中语义标签降低理解成本的实际表现
新成员接手项目时，看到 <nav></nav> 就知道该区域负责路由跳转逻辑，看到 <aside></aside> 就默认不参与核心业务流渲染——这种即读即懂的契约，比翻查 class="sidebar" 对应的 CSS 或 JS 更快。
立即学习“前端免费学习笔记（深入）”；
