语义标签必须严格匹配内容角色，否则损害可访问性；如须含标题，只能有一个且不被sectioning元素包裹，仅用于主导航，标题层级须连续且唯一。
直接用原生语义标签，但必须确保内容与标签隐含角色严格匹配；否则比不用还糟。
为什么 <section></section> 没标题就等于 <div>
<p>W3C 明确规定：<code><section></section> 必须有自己独立的标题（<h2></h2>–<h6></h6>），否则它不构成语义分组，只是个空壳。浏览器和屏幕阅读器不会把它当“节”处理，大纲（outline）里也不会出现。
- 正确：一个产品参数区块，开头是
<h3></h3>参数详情<section></section>
- 错误：用
<section class="grid-3"></section> 做纯布局容器——该用 <div>
<li>后果：Lighthouse 报 “Heading levels should only increase by one” 或 “Document does not have a main landmark”，因为无标题的 <code><section></section> 干扰了大纲生成
<main></main> 只能出现一次，且不能被其他 sectioning 元素包裹
<main></main> 表示当前页面唯一的核心内容主体，不是“视觉上在中间那块”。它的使用有硬性约束：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
- 全页只能有一个
<main></main>，且应为 <article></article>、<section></section> 等 sectioning content 包裹）
- 常见错误：
<section><main>...</main></section> —— 这会让辅助技术误判 <main></main> 是某个节的局部主体，而非整页主干
- 检查方式：打开 Chrome DevTools → Elements → 右键任意节点 → “Inspect Accessibility Properties”，确认
<main></main> 的 computed role 是 main，且没有重复
<nav></nav> 不是所有链接容器，而是“主导航”的明确信号
<nav></nav> 的隐式 role 是 navigation，屏幕阅读器默认会提供“跳过导航”快捷键。滥用会导致用户被迫听完整个侧边栏、社交图标、页脚链接列表。
- 该用：
<nav></nav> 包裹主导航栏（如首页/产品/关于）、面包屑（<ol class="breadcrumb"></ol>）
- 不该用：页脚的“隐私政策”“联系我们”、文章末尾的“上一篇/下一篇”、纯图标按钮组（无文字链接）
- 替代方案：非主导航链接组，用
<div role="region" aria-label="Footer links"> 更准确；图标按钮必须加 <code>aria-label，不能只靠 title
标题层级断裂比没用语义标签更伤可访问性
辅助技术依赖 <h1></h1>–<h6></h6> 构建文档大纲树。跳级（如 <h1></h1> 后直接 <h3></h3>）、缺失 <h1></h1>、多个 <h1></h1>，都会让视障用户彻底迷失上下文。
- 规则：全页仅一个
<h1></h1>（代表页面主题），<h2></h2> 分割主模块（如“服务介绍”“客户案例”），<h3></h3> 描述子模块
- 陷阱：用
<h2></h2> 写 logo 文字（应为 <h1></h1> 或纯文本 + aria-label）；CSS 隐藏了 <h1></h1> 却没加 aria-hidden="true"，导致语音重复播报
- 验证：用 axe 浏览器插件或 Lighthouse 的 “Accessibility” 审计，重点看 “Heading levels should only increase by one” 和 “Document has a main landmark”
真正难的不是写对标签名，而是每次敲下 <section></section> 或 <nav></nav> 时，都得问一句：这个内容在逻辑上是否真的承担对应角色？DOM 结构、ARIA 角色、标题层级、辅助技术反馈——四者必须一致，缺一不可。
<h3></h3>参数详情<section></section>
<section class="grid-3"></section> 做纯布局容器——该用 <div>
<li>后果：Lighthouse 报 “Heading levels should only increase by one” 或 “Document does not have a main landmark”，因为无标题的 <code><section></section> 干扰了大纲生成
<main></main> 只能出现一次，且不能被其他 sectioning 元素包裹
<main></main> 表示当前页面唯一的核心内容主体，不是“视觉上在中间那块”。它的使用有硬性约束：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 全页只能有一个
<main></main>，且应为的直系子元素（或至少不被<article></article>、<section></section>等 sectioning content 包裹） - 常见错误：
<section><main>...</main></section>—— 这会让辅助技术误判<main></main>是某个节的局部主体，而非整页主干 - 检查方式：打开 Chrome DevTools → Elements → 右键任意节点 → “Inspect Accessibility Properties”，确认
<main></main>的 computed role 是main，且没有重复
<nav></nav> 不是所有链接容器，而是“主导航”的明确信号
<nav></nav> 的隐式 role 是 navigation，屏幕阅读器默认会提供“跳过导航”快捷键。滥用会导致用户被迫听完整个侧边栏、社交图标、页脚链接列表。
- 该用：
<nav></nav>包裹主导航栏（如首页/产品/关于）、面包屑（<ol class="breadcrumb"></ol>） - 不该用：页脚的“隐私政策”“联系我们”、文章末尾的“上一篇/下一篇”、纯图标按钮组（无文字链接）
- 替代方案：非主导航链接组，用
<div role="region" aria-label="Footer links"> 更准确；图标按钮必须加 <code>aria-label，不能只靠title标题层级断裂比没用语义标签更伤可访问性
辅助技术依赖
<h1></h1>–<h6></h6>构建文档大纲树。跳级（如<h1></h1>后直接<h3></h3>）、缺失<h1></h1>、多个<h1></h1>，都会让视障用户彻底迷失上下文。- 规则：全页仅一个
<h1></h1>（代表页面主题），<h2></h2>分割主模块（如“服务介绍”“客户案例”），<h3></h3>描述子模块 - 陷阱：用
<h2></h2>写 logo 文字（应为<h1></h1>或纯文本 +aria-label）；CSS 隐藏了<h1></h1>却没加aria-hidden="true"，导致语音重复播报 - 验证：用 axe 浏览器插件或 Lighthouse 的 “Accessibility” 审计，重点看 “Heading levels should only increase by one” 和 “Document has a main landmark”
真正难的不是写对标签名，而是每次敲下
<section></section>或<nav></nav>时，都得问一句：这个内容在逻辑上是否真的承担对应角色？DOM 结构、ARIA 角色、标题层级、辅助技术反馈——四者必须一致，缺一不可。 - 规则：全页仅一个
