屏幕阅读器通过解析dom的语义角色（role）、名称（name）和状态（state）来“听懂”页面，原生语义标签如、、自带正确role和交互逻辑，而等通用标签默认为generic，需手动补全aria且易漏项。
屏幕阅读器怎么靠语义标签“听懂”页面
屏幕阅读器不是读 HTML 标签名，而是依赖浏览器暴露的 role、name、state 等可访问性树（Accessibility Tree）信息。原生语义标签自带正确 role，比如 <nav></nav> 默认是 role="navigation"，<main></main> 是 role="main"，<button></button> 自带 role="button" 和键盘交互逻辑。
而一堆 <div class="header"> 或 <code><span onclick="..."></span>，浏览器默认给的是 role="generic" 或 role="none" —— 屏幕阅读器只会念“分组”或“未命名元素”，用户得靠猜。
实操建议：
- 用
<nav></nav>包主导航，别用<div class="menu"> + 手动加 <code>role="navigation"（容易漏aria-label或键盘支持） -
<main></main>必须且仅能出现一次，且不能嵌套在<article></article>或<section></section>里，否则可访问性树会降级为普通容器 - 表单控件优先用原生
<button></button>、<input type="checkbox">，而不是<div tabindex="0"> 模拟 <h3>搜索引擎怎么“看”语义结构</h3> <p>Googlebot 和百度蜘蛛不渲染 CSS，也不执行 JS，它们解析的是 DOM 结构和语义层级。一个 <code><h1></h1>在<header></header>里，比在<div id="title"> 里，权重信号强得多；<code><article></article>内的<time datetime="2026-08-25"></time>能被直接提取为发布时间，而<span class="date">昨天</span>基本不可识别。常见错误现象：
- 全站用
<div> 搭骨架，爬虫无法区分 header / main / footer，主内容权重被稀释 <li>多个 <code><h1></h1>并存，或<h3></h3>出现在<h1></h1>前，破坏标题层级，影响内容主题判断 -
<footer></footer>里塞大量外链（如友情链接），但没用<nav></nav>包裹，爬虫可能忽略其导航意图，甚至误判为垃圾链接 - 把整个右侧导航栏写成
<aside><nav>...</nav></aside>：错——主导航属于全局结构，该用<nav></nav>直接挂载在下，而非包裹在<aside></aside>里 - 用
<section></section>包一个按钮或单张图：错——缺乏主题和标题，语义坍塌，辅助技术无法归类，爬虫也无结构信号可抓 -
<article></article>嵌套在<section></section>里却没标题：违反 WCAG 1.3.1，屏幕阅读器无法建立内容上下文 -
<time datetime="2026-08-26">今天</time>让机器可读时间，比纯文本“2026年8月26日”强十倍 -
<img src="logo.png" alt="魅影App官方下载入口">中的alt是强制语义，空字符串alt=""仅适用于纯装饰图 - 所有可交互元素（如自定义下拉、模态框触发器）必须有
tabindex="0"+role+ 键盘事件监听（Enter/Space），否则键盘用户直接卡死
为什么
<aside></aside>和<section></section>容易用错<aside></aside>不是“侧边栏容器”，而是“与当前内容相关但可独立存在”的内容，比如博客文章旁的作者简介、术语解释框、广告位；<section></section>也不是“视觉区块”，它必须有明确的主题，且应配<h2></h2>–<h6></h6>标题。
Google SEO GEO Auto Index下载Google索引API工具。用于提交URL以供Google索引。支持两种模式：“auto-index”（获取sitemap，与缓存对比差异并提交...）
典型误用：
最常被忽略的细节：时间、图片、键盘焦点
语义化不只是选对块级标签，还涉及内联标记和行为补全：
这些点不显眼，但一旦缺失，可访问性检测工具（如 axe、Lighthouse）立刻报错，SEO 结构化数据也会失效。真正难的不是写
<header></header>，而是让每个标签都承担起它该有的协议责任。 - 全站用
