必须显式闭合的标签包括<p>、<div>、<section>、<script>、<textarea>、<select>等normal elements，否则触发DOM断裂、JS失效、SSR hydration失败；void元素如<img>、<input>、<meta>等禁止闭合，自闭合写法（如<img />）冗余且可能被工具误解析。
不闭合标签不会让页面“看起来差不多”，而是直接触发 DOM 结构断裂——JS 找不到节点、SSR hydration 失败、读屏器跳过关键区域，甚至 SEO 抓取失败。
哪些标签必须显式写
像 <p>、<div>、<section>、<script>、<textarea>、<select> 这类 normal elements，HTML 规范强制要求显式闭合。浏览器不会“帮你补全”，而是按解析规则强行截断：
-
<p>Hello后面所有内容（包括后续<div>）都会被当成这个未闭合<p>的子节点，直到遇到下一个块级元素才可能“被迫结束” -
<script>console.log(1)</script>写成<script />→ JS 完全不执行，控制台静默，连语法错误都不报 -
<textarea>default</textarea>写成<textarea />→ 输入框变空，value属性失效，placeholder也不显示
哪些标签根本不能写
<img>、<input>、<meta>、<link>、<hr> 属于 void elements，语义上就是“无内容容器”。写 <img></img> 是非法的，浏览器会忽略后半部分，甚至把后续 HTML 当作该标签的子内容解析：
-
<img src="a.jpg"></img><p>This paragraph may disappear</p>→<p>可能被吞进<img>的 DOM 树里（渲染不可见），导致样式错乱或 JS 获取不到节点 -
<img src="a.jpg" />中的斜杠在 HTML 文档中纯属冗余；某些模板引擎（如旧版 Vue SFC）或 linter 工具会把src截断为src="a.jpg "（带空格）
<script> 和 <style> 空标签也必须闭合
这两个标签哪怕没内容，也绝不能写成自闭合形式。它们的文本子节点就是可执行代码或 CSS 规则：
立即学习“前端免费学习笔记（深入）”；
-
<script />不代表 “无脚本”，而是 “无效脚本容器”——浏览器不执行、不触发DOMContentLoaded、不参与 hydration -
<style />同理：CSS 规则丢失，样式表不生效，Lighthouse 直接扣分 - 常见误写：
<script defer src="app.js" />→ 必须改成<script defer src="app.js"></script>
未闭合标签如何引发 Hydration failed？
这是 SSR/SSG 应用中最隐蔽也最致命的问题之一。服务端输出的 HTML 若存在未闭合标签（比如漏掉 </section>），客户端 React/Vue 按标准 HTML 解析时，DOM 树结构就和服务端不一致：
- 服务端输出：
<section><p>text</p>（缺</section>） - 客户端解析：把后续所有内容都塞进这个
<section>，导致组件树错位 - 结果：
Hydration failed because the initial UI does not match what was rendered on the server - 更麻烦的是：这种错误常不报红，只在控制台静默警告，或表现为某块区域交互失灵、动画卡顿
真正难的不是写出能跑的 HTML，而是写出浏览器不纠错、机器不猜意图、人一眼能看清嵌套关系的 HTML——一个没闭合的 <main>，可能让整页 SEO 流量掉 30%，而你根本收不到任何提示。
