嵌套超过三层基本需重构，因会导致css选择器失效、js查询失败、屏幕阅读器跳过内容；主内容区从起不得超过三层，且须用语义标签替代冗余，禁用非法嵌套如内含或内含。
嵌套超过三层，基本就该重构了——不是为了“看起来整洁”，而是因为 DOM 树过深会直接导致 CSS 选择器失效、JS querySelector 找不到节点、屏幕阅读器跳过内容、甚至 DevTools 审查要点四下才能定位到一段文本。
怎么判断嵌套是否已经失控
别靠肉眼数 <div> 层级。打开 Chrome DevTools → Elements 面板，把鼠标悬停在任意节点上，看右上角显示的“Path”：如果出现类似 <code>body > div > div > div > div > main > article > section > p 这种路径，就是危险信号。
- 真正有效的阈值是「主内容区不超过三层嵌套」，即从
<main></main>开始往下，<section></section>/<article></article>/<div> 连续包裹不要超过三层 <li>浏览器自动补全（比如往 <code><ul></ul>里塞<div> 后，DevTools 显示出 <code><tbody>）是嵌套违规的明确提示 <li> <code><p></p> <div>xxx</div>这类写法在 HTML5 中虽不报错，但会被解析为<p></p> <div>xxx</div>，语义和样式全乱 -
<p></p>只允许 phrasing content：<span></span>、<strong></strong>、<a></a>—— 绝对不能放<div>、<code><h2></h2>、<ul></ul> -
<ul></ul>和<ol></ol>的直接子节点只能是<li>；写<ul><div><li></div></ul>会导致<div> 被踢出列表 <li><code><table> 必须有 <code><tbody> 或 <code><thead>/<code><tfoot>；<code><tr> 只能出现在这些容器内部 <li> <code><form></form>不得嵌套另一个<form></form>；<label></label>的for属性必须精确匹配对应<input>的id - 导航区域统一用
<nav></nav>包裹<ul></ul>，而不是<div class="nav"><div class="menu"> <li>主内容区块优先用 <code><main></main>，里面再分<article></article>（独立内容）或<section></section>（主题分组），每个<section></section>必须有<h2></h2>～<h6></h6>标题 - 两个连续的
<section></section>如果主题一致（比如都是用户评论），考虑合并成一个<section></section>，用<h3></h3>分隔子区块，而不是加一层<div> <li>纯样式占位的 <code><div>（比如只为了加 margin 或 background）应删除，改用 CSS 的 <code>gap、padding或伪元素实现工具链怎么落地检查嵌套问题
靠人眼 review 几乎必然漏掉。必须进 CI 和编辑器：
- VS Code 安装
HTMLHint插件，配置.htmlhintrc启用"tag-pair": true（捕获错位闭合）、"attr-no-duplication": true（防复制粘贴导致的嵌套错乱） - CI 流程中加入
npx htmlhint src/**/*.html，失败即阻断 PR 合并 - 用 Prettier 格式化时，禁用
html.validate.scripts，避免把内联<script></script>当作嵌套问题误报 - 审查 DOM 树时，重点关注是否有被浏览器自动插入的节点（如
<tbody>、<code>），那是原始 HTML 已经违规的铁证最常被忽略的一点：嵌套问题从来不是孤立存在的。它往往和 CSS 的过度依赖父选择器（比如
div div div p）、JS 的硬编码路径（比如el.parentNode.parentNode.querySelector）绑定在一起。重构 HTML 结构时，必须同步清理这些耦合代码，否则只是把“屎山”从 HTML 搬到了 JS/CSS 里。
- VS Code 安装
哪些标签能合法嵌套哪些标签
不是所有块级元素都能互相包。MDN 对每个标签都明确定义了 “Permitted content”，必须查。常见硬性限制：
用语义化标签代替 div 套 div 的实操要点
不是“换几个标签就完事”。关键是让标签承载真实结构意图：
