W3C Validator 报“Element img is not closed”是HTML5规范级错误，因<img>为void元素，<img></img>属非法嵌套，会导致DOM解析异常和层级错乱。
W3C Validator 报 “Element img is not closed” 是什么问题
这不是警告，是明确的规范级错误。HTML5 中 <img> 是 void element（空元素），合法写法只有 <img src="x" alt="y">；<img src="x" alt="y" /> 属于 XHTML 风格，在 HTML5 中容错但非标准；而 <img></img> 是非法嵌套，会导致后续所有标签层级偏移——浏览器会立刻中断解析并尝试修复，DOM 已不是你写的那样。
这类问题在 JS 动态插入 HTML 时尤其隐蔽：比如模板字符串里拼错了，innerHTML = "<img src='a'></img>"，执行后 DOM 结构就乱了，但控制台不报错。
-
html-validate配置"html-validate/no-self-closing": "error"可提前拦截<img />类写法（注意：它不拦<img></img>，那是更严重的嵌套错误） - 编辑器插件（如 Auto Close Tag）无法识别
<img>是否该闭合，容易盲目补</img> - 真正要防的是
<div><p>text</div>这类漏闭 + 错嵌，它不会触发no-self-closing，但会让<p>被意外包裹进<div>后续所有内容
为什么 htmlhint 的 tag-pair 规则不能替代浏览器解析验证
tag-pair 能精准定位 <div><p>text</div> 这类“有开无闭”或“闭多于开”的行号列号，但它只做静态文本匹配，不模拟浏览器的插入模式和开放元素栈行为。
也就是说：tag-pair 会报错 <div><p>text</div>，但它不会告诉你：浏览器实际生成的 DOM 是 <div><p>text</p></div>（因为 <p> 遇到块级兄弟自动隐式闭合），也不会预警 <nav><header>content</nav> 这种非法嵌套导致 <header> 被吞进 <nav> 的语义污染风险。
立即学习“前端免费学习笔记（深入）”；
- 它对自闭合标签（
<img>、<input>）完全不校验是否写了/>，只关心“成对性” - 混用 Vue/JSX 模板时，
tag-pair常误报片段（如<template>内未闭合的<div>），需手动关掉："tag-pair": false - 真正需要交叉验证：先用
htmlhint扫文本级错误，再用 W3C Validator 或jsdom加载后检查实际生成的 DOM 结构
CI/CD 中如何让 HTML 自愈重构真正落地
所谓“自愈”，不是靠 AI 猜你本意，而是用确定性工具链把容错逻辑显性化、可审计、可回滚。
推荐三步流水线：htmlhint → tidy-html5 → html-validate，其中 tidy-html5 是关键——它比编辑器更懂 HTML 嵌套逻辑，能按标准规则重排结构，而不是机械补 </div>。
-
tidy-html5 --show-body-only yes --wrap 0 --indent auto --tidy-mark no：关闭冗余标记，保留原始缩进语义 - 配置
tidy-html5的drop-empty-elements和drop-empty-paras防止空标签污染 - 必须把
html-validate放在最后一步：它校验的是tidy输出后的 HTML，而非原始源码，这样才能暴露“自愈后是否引入新问题” - 注意：
tidy-html5默认会把<img src="x">改成<img src="x" />，若团队坚持纯 HTML5 风格，加参数--vertical-space no --break-before-blank-line no并禁用fix-uri
JS 动态插入 HTML 时最容易被忽略的闭合陷阱
服务端渲染或静态 HTML 校验再严，也挡不住 JS 里拼错的一行 innerHTML。这里没有“自动修复”，只有预防。
最危险的是：你以为写的是 <div class="card"><h3>Title</h3><p>Text</p>，结果变量拼接漏了 </div>，最终变成 <div>...</div><div>...</div> 外层没包，后续所有 DOM 操作都基于错误父节点。
- 永远不要用字符串拼接构造复杂 HTML；改用
document.createElement+appendChild，或模板字符串配合DOMParser：new DOMParser().parseFromString(html, 'text/html') - 若必须用
innerHTML，插入前先过一遍tidy-html5CLI 或轻量版parse5（它比正则可靠得多） -
<template>元素是天然安全区：它不渲染、不执行脚本、不发起请求，且自带原生content属性返回 DocumentFragment，避免字符串解析歧义 - 特别警惕
<svg>内嵌 HTML：SVG 命名空间下<p>不是块级元素，<div>直接无效，浏览器会丢弃——这种“不报错却失效”的情况，htmlhint也检测不到
tidy-html5 的自动重排负责」——它可能把你的手写缩进全打乱，也可能把注释位置挪到不可预期的地方。别假设它只是“美化”，它是在重写结构。 
