HTML标签闭合规范性对页面代码质量与性能的影响分析-html教程-PHP中文网

必须显式闭合的标签包括、、、、、等normal elements，否则触发dom断裂、js失效、ssr hydration失败；void元素如、、等禁止闭合，自闭合写法（如）冗余且可能被工具误解析。

html标签闭合规范性对页面代码质量与性能的影响分析

不闭合标签不会让页面“看起来差不多”，而是直接触发 DOM 结构断裂——JS 找不到节点、SSR hydration 失败、读屏器跳过关键区域，甚至 SEO 抓取失败。

哪些标签必须显式写闭合？

像 <p></p>、<div>、<code><section></section>、<script></script>、<textarea></textarea>、<select></select> 这类 normal elements，HTML 规范强制要求显式闭合。浏览器不会“帮你补全”，而是按解析规则强行截断：

<p>Hello</p> 后面所有内容（包括后续 <div>）都会被当成这个未闭合 <code><p></p> 的子节点，直到遇到下一个块级元素才可能“被迫结束”
<script>console.log(1)</script> 写成 <script></script> → JS 完全不执行，控制台静默，连语法错误都不报
<textarea>default</textarea> 写成 <textarea></textarea> → 输入框变空，value 属性失效，placeholder 也不显示

哪些标签根本不能写闭合？

<img>、<input>、<meta>、<link>、<hr> 属于 void elements，语义上就是“无内容容器”。写 <img> 是非法的，浏览器会忽略后半部分，甚至把后续 HTML 当作该标签的子内容解析：

<img src="a.jpg"><p>This paragraph may disappear</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> → <p></p> 可能被吞进 <img> 的 DOM 树里（渲染不可见），导致样式错乱或 JS 获取不到节点
<img src="a.jpg"> 中的斜杠在 HTML 文档中纯属冗余；某些模板引擎（如旧版 Vue SFC）或 linter 工具会把 src 截断为 src="a.jpg "（带空格）

`<script></script>` 和 `<style></style>` 空标签也必须闭合

这两个标签哪怕没内容，也绝不能写成自闭合形式。它们的文本子节点就是可执行代码或 CSS 规则：

<script></script> 不代表 “无脚本”，而是 “无效脚本容器”——浏览器不执行、不触发 DOMContentLoaded、不参与 hydration
<style></style> 同理：CSS 规则丢失，样式表不生效，Lighthouse 直接扣分
常见误写：<script defer src="app.js"></script> → 必须改成 <script defer src="app.js"></script>

未闭合标签如何引发 Hydration failed？

这是 SSR/SSG 应用中最隐蔽也最致命的问题之一。服务端输出的 HTML 若存在未闭合标签（比如漏掉），客户端 React/Vue 按标准 HTML 解析时，DOM 树结构就和服务端不一致：

服务端输出：<section><p>text</p></section>（缺）
客户端解析：把后续所有内容都塞进这个 <section></section>，导致组件树错位
结果：Hydration failed because the initial UI does not match what was rendered on the server
更麻烦的是：这种错误常不报红，只在控制台静默警告，或表现为某块区域交互失灵、动画卡顿

真正难的不是写出能跑的 HTML，而是写出浏览器不纠错、机器不猜意图、人一眼能看清嵌套关系的 HTML——一个没闭合的 <main></main>，可能让整页 SEO 流量掉 30%，而你根本收不到任何提示。