语义标签的准确使用决定dom结构可读性与无障碍支持，关键在于嵌套是否符合语义层级并触发浏览器预期的landmark和sectioning行为。

用对语义标签，DOM树自然清晰——关键不是“用了没”，而是“用得准不准”。真正影响结构可读性与无障碍支持的，是标签嵌套是否符合语义层级、是否触发了浏览器预期的 landmark 和 sectioning 行为。

先确认哪些标签能生成独立大纲节点

只有具备 sectioning 或 landmark 特性的语义标签，才会在辅助技术中形成可识别的导航单元。比如：

• ：必须唯一，自动获得 role="main"，是页面核心内容锚点
• 、
  、
  ：属于 sectioning content，会参与大纲构建（前提是内部有标题）
• 和
  ：仅在直接子元素为 或 sectioning 标签内时，才具语义作用；单独放在 div 里等于无意义包装

验证 DOM 是否真形成新大纲

写完标签别急着看样式，打开 Chrome DevTools → Elements 面板 → 右键某个 <article></article> 或 <section></section> → “Reveal in Accessibility Tree”。如果没出现在树里，说明：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 它被包在非 sectioning 容器里（例如套在 <div> 中） <li>缺少有效的标题（<code><h1>–<h6></h6> </h1>），导致浏览器不将其视为可导航区块
• 父级结构冲突（如 <main></main> 内又嵌套了另一个 <main></main>）

避免常见嵌套陷阱

语义不是装饰，错误嵌套会让结构失效：

• 不要把 <nav></nav> 放进 <header></header> 就万事大吉——<header></header> 本身不提供导航语义，<nav></nav> 才是独立 landmark
• <section></section> 不等于“分块样式区”，它需要有主题和标题；纯视觉分隔建议用 <div> + CSS <li> <code><aside></aside> 必须与邻近 <article></article> 或 <section></section> 有关联，否则应改用 <section></section> 或普通容器

配合标题建立真实层级

大纲由标题隐式驱动，语义标签只是容器载体：

• 每个 <article></article> 或 <section></section> 应以 <h2></h2> 或更高级别标题起始（不能跳级，也不能用 <h1></h1> 多次）
• <main></main> 内首个标题通常为 <h1></h1>，后续区块按逻辑降级（<h2></h2> → <h3></h3>）
• 用 <hgroup></hgroup> 合并主副标题时，注意它已不被主流屏幕阅读器广泛支持，建议优先用 CSS 视觉隐藏辅助文本