HTML5中<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>等结构标签必须成对闭合，否则会导致DOM解析异常、CSS失效、无障碍访问受损及W3C验证失败。
HTML5中哪些结构标签必须成对闭合？
绝大多数HTML5结构标签（如 <header>、<nav>、<main>、<section>、<article>、<aside>、<footer>）都属于**非自闭合标签**，必须严格成对出现。浏览器不会自动补全它们的结束标签——即使页面看起来“正常显示”，未闭合也可能导致：
- DOM树解析异常，影响JavaScript获取元素（例如
document.querySelector('section')返回null） - CSS选择器失效（如
section > p因嵌套断裂而匹配不到） - 屏幕阅读器语义中断，损害无障碍访问
- W3C验证失败（W3C Markup Validation Service 会报
End tag for element “section” seen, but there were open elements类错误）
<input>、<img> 这类标签为什么不用闭合？
它们是**空元素（void elements）**，在HTML5规范中被明确定义为“不能包含任何内容”，因此语法上只允许单标签形式。写成 <input></input> 或 <img></img> 是**无效HTML**，现代浏览器虽会容错解析，但：
- W3C验证器直接报错：
Element “input” is not allowed as child of element “div” in this context（因解析器误判为有子内容） - 某些静态站点生成器（如Hugo、Jekyll）或构建工具（如Webpack + html-webpack-plugin）可能拒绝处理
- VS Code等编辑器会标红并提示
Tag 'input' is missing required attribute 'type'等误导性警告
正确写法只需一个开始标签，斜杠 / 在HTML5中完全可省略（但保留也合法）：
<input type="text" name="username"> <img src="logo.png" alt="Logo">
常见闭合陷阱：你以为它自闭，其实它不是
有些标签名字像自闭合，实际是双标签——强行省略结束标签会导致严重嵌套错乱。典型例子：
立即学习“前端免费学习笔记（深入）”；
-
<textarea>：必须写<textarea>默认值</textarea>，写成<textarea />会丢失所有内容且破坏后续结构 -
<script>和<style>：即使内容为空，也必须闭合（<script></script>），否则浏览器认为脚本/样式块未结束 -
<video>、<audio>：虽常带controls属性，但仍是容器标签，需闭合；若内部有<source>，更不能漏掉</video>
一个真实调试场景：某页底部导航突然跑到顶部，检查DOM发现 <nav> 标签没闭合，导致整个 <body> 被浏览器“猜测”为 <nav> 的内容区。
如何快速验证标签是否闭合正确？
别靠肉眼数标签——用工具直击本质：
- 在VS Code中安装插件 Auto Close Tag 和 Auto Rename Tag，输入
<div>后自动补全</div>，重命名时同步更新 - 右键网页 → “查看页面源代码” → 复制全部到 W3C验证器，它会精确指出哪一行哪个标签未闭合
- Chrome开发者工具中，Elements面板里看DOM树：如果某个标签展开后子节点异常多（比如
<header>下出现了本该在<footer>里的元素），基本就是前面某个标签忘闭合了
最易被忽略的一点：HTML5允许部分标签的结束标签“省略”（如 <p>、<li>），但这只是语法糖，**不等于可以随意不写**——省略规则有严格上下文限制，新手建议一律显式闭合，避免把“允许”当成“推荐”。
