HTML标签嵌套合法性必须依赖HTML5规范解析器验证，而非肉眼、正则或Auto Close Tag/Emmet等插件；推荐使用W3C validator或html-validate工具，确保DOCTYPE和charset声明正确以避免怪异模式导致校验失准。
HTML 标签嵌套是否合法，靠肉眼根本不可靠
浏览器容错能力强，<div><p><span></div></p></span> 这类明显错位的嵌套，可能渲染不出明显异常，但会触发 HTML 解析器静默修正（比如自动闭合、移位），导致 DOM 结构与预期不符，后续 JS 操作 document.querySelector 失败或样式失效。真正可靠的检查必须基于 HTML5 规范解析器，而非正则或简单括号匹配。
VS Code + Auto Close Tag + Emmet 不是嵌套检查工具
这些插件只管“写的时候顺手补标签”，不验证嵌套逻辑。比如在 <ul> 里直接写 <div>，Emmet 仍会帮你补 </div>，但 <div> 在 HTML5 中不允许作为 <ul> 的子元素——这属于语义性嵌套错误，需规范校验器识别。
-
Auto Close Tag只跟踪开/闭标签对，不管父容器是否允许该子元素 -
Emmet展开缩写时完全不校验上下文合法性 - 即使所有标签都成对出现，
<p><h1>标题</h1></p>仍是非法嵌套（<h1>不可嵌套在<p>内）
真正有效的批量检测：用 validator.w3.org 或本地 html-validate
W3C 官方验证器（validator.w3.org）和开源工具 html-validate 是目前最贴近标准的方案。前者适合单文件粘贴或 URL 检测；后者支持 CLI 批量扫描整个目录，集成进 CI 流程也方便。
- 安装：
npm install --global html-validate - 运行：
html-validate src/**/*.html - 关键配置项：
"element-permitted-content"规则会报出<section>里用了<table>这类内容模型违规 - 注意：默认不检查自定义元素（如
<my-button>），需在配置中显式启用"no-unknown-elements"
CI 中嵌入检查时，最容易被忽略的是 DOCTYPE 和字符编码声明
html-validate 默认按 HTML5 解析，但如果文件开头缺失 <!DOCTYPE html>，或 <meta charset="utf-8"> 位置错（比如放在 <title> 后），可能导致解析器降级为怪异模式（Quirks Mode），进而让嵌套规则判断失准——例如把 <li> 直接放 <body> 当作合法（实际仅在怪异模式下容忍）。
立即学习“前端免费学习笔记（深入）”；
- 务必确保每个 HTML 文件以
<!DOCTYPE html>开头，且<meta charset>紧跟<head>之后（最好第一行） - CI 脚本中建议加前置检查：
grep -l '' *.html | wc -l确认覆盖率 - 某些构建工具（如 Vite 插件）会动态注入 meta，导致源码无声明但运行时有——这种要以最终产出 HTML 为准，而非源模板
