语义标签的准确使用决定DOM结构可读性与无障碍支持，关键在于嵌套是否符合语义层级并触发浏览器预期的landmark和sectioning行为。
用对语义标签，DOM树自然清晰——关键不是“用了没”，而是“用得准不准”。真正影响结构可读性与无障碍支持的，是标签嵌套是否符合语义层级、是否触发了浏览器预期的 landmark 和 sectioning 行为。
先确认哪些标签能生成独立大纲节点
只有具备 sectioning 或 landmark 特性的语义标签，才会在辅助技术中形成可识别的导航单元。比如：
-
<main>：必须唯一，自动获得
role="main"，是页面核心内容锚点 - <article>、<section>、<aside>：属于 sectioning content，会参与大纲构建（前提是内部有标题）
-
<header> 和 <footer>：仅在直接子元素为
<body>或 sectioning 标签内时，才具语义作用；单独放在 div 里等于无意义包装
验证 DOM 是否真形成新大纲
写完标签别急着看样式，打开 Chrome DevTools → Elements 面板 → 右键某个 <article> 或 <section> → “Reveal in Accessibility Tree”。如果没出现在树里，说明：
- 它被包在非 sectioning 容器里（例如套在
<div>中） - 缺少有效的标题（
<h1>–<h6>），导致浏览器不将其视为可导航区块 - 父级结构冲突（如
<main>内又嵌套了另一个<main>）
避免常见嵌套陷阱
语义不是装饰，错误嵌套会让结构失效：
立即学习“前端免费学习笔记（深入）”；
- 不要把
<nav>放进<header>就万事大吉——<header>本身不提供导航语义，<nav>才是独立 landmark -
<section>不等于“分块样式区”，它需要有主题和标题；纯视觉分隔建议用<div>+ CSS -
<aside>必须与邻近<article>或<section>有关联，否则应改用<section>或普通容器
配合标题建立真实层级
大纲由标题隐式驱动，语义标签只是容器载体：
- 每个
<article>或<section>应以<h2>或更高级别标题起始（不能跳级，也不能用<h1>多次） -
<main>内首个标题通常为<h1>，后续区块按逻辑降级（<h2>→<h3>） - 用
<hgroup>合并主副标题时，注意它已不被主流屏幕阅读器广泛支持，建议优先用 CSS 视觉隐藏辅助文本
