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