判断嵌套是否过深需检查浏览器文档大纲和可访问性树是否断裂，而非单纯数<div>层数；<main>必须为<body>直接子元素，<ol>目录中<a>须直接包裹文本，<p>内禁用块级元素，<button>不可嵌套在<a>或另一<button>中。
如何判断嵌套是否过深：看浏览器大纲和可访问性树
嵌套深度不是数 <div> 有几层，而是看浏览器生成的文档大纲（Document Outline）是否断裂、屏幕阅读器是否能正确播报层级。Chrome DevTools 的 Elements 面板右键任意元素 → “What’s this element?”，若 <main> 显示在 <section> 内部，或 <header> 未被识别为 “Sectioning content”，就说明嵌套已破坏语义结构。
常见信号包括：document.querySelectorAll('h2').length 和浏览器大纲视图中“第2章”项数量不一致；Lighthouse 报 document-outline 错误；NVDA/ChromeVox 跳过某节内容。
<main> 必须是 <body> 的直接子元素
W3C 明确禁止 <main> 出现在 <section>、<article>、<aside> 或 <nav> 内部。哪怕视觉上它“应该属于某个区块”，也不能靠嵌套实现——结构上它只能与 <header>、<nav>、<footer> 并列于 <body> 下。
- 错误写法：
<section><main></main></section> - 正确写法：
<body><header></header><main></main><footer></footer></body> - 若需视觉分组，用 CSS Grid/Flex +
role="region"替代包裹
<ol> 嵌套做目录时，<a> 必须直接包裹文本
目录项不是装饰，而是可聚焦、可跳转、可被 AT（辅助技术）关联标题的交互节点。<li><a href="#ch2"><span>第二章：DOM 操作</span></a></li> 这种写法会导致键盘 Tab 焦点落在 <a> 上，但读屏器无法将“第二章：DOM 操作”作为链接文本播报，因为 <span> 阻断了文本节点与 <a> 的语义绑定。
立即学习“前端免费学习笔记（深入）”；
- 必须写成：
<li><a href="#ch2">第二章：DOM 操作</a></li> - 锚点 ID 大小写敏感：
<h2 id="Ch2">和<a href="#ch2">不匹配 - 子级
<ol>必须完整写在父<li>内，不能跨行或夹注释，否则解析器可能提前闭合
<p> 内严禁出现 <div>、<ul>、<h2> 等块级元素
这不是样式问题，而是 HTML 内容模型硬限制。<p> 只接受 phrasing content，浏览器遇到 <p>abc<div>def</div></p> 会自动纠正为 <p>abc</p><div>def</div> —— 你写的结构已丢失，后续 CSS 选择器如 p > div 永远不会命中。
- 替代方案：
<div>换成<span>（若语义允许），或直接去掉<p>，用<div>+role="paragraph" -
<button>也禁止嵌套在<a>或另一个<button>中，否则触发 WCAG 4.1.2 违规 - 验证工具推荐：
axe-core浏览器插件，比手动检查更早暴露这类隐性断裂
