HTML5中、、、、、、等结构标签必须成对闭合,否则会导致DOM解析异常、CSS失效、无障碍访问受损及W3C验证失败。

HTML5中哪些结构标签必须成对闭合?
绝大多数HTML5结构标签(如 、、、、 类错误)
、 这类标签为什么不用闭合?
它们是**空元素(void elements)**,在HTML5规范中被明确定义为“不能包含任何内容”,因此语法上只允许单标签形式。写成 document.querySelector('section') 或 null 是**无效HTML**,现代浏览器虽会容错解析,但:
- W3C验证器直接报错:
section > p(因解析器误判为有子内容) - 某些静态站点生成器(如Hugo、Jekyll)或构建工具(如Webpack + html-webpack-plugin)可能拒绝处理
- VS Code等编辑器会标红并提示
End tag for element “section” seen, but there were open elements等误导性警告
正确写法只需一个开始标签,斜杠 在HTML5中完全可省略(但保留也合法):
@@##@@
常见闭合陷阱:你以为它自闭,其实它不是
有些标签名字像自闭合,实际是双标签——强行省略结束标签会导致严重嵌套错乱。典型例子:
-
:必须写,写成会丢失所有内容且破坏后续结构 -
Element “input” is not allowed as child of element “div” in this context和Tag 'input' is missing required attribute 'type':即使内容为空,也必须闭合(/),否则浏览器认为脚本/样式块未结束 -
、下出现了本该在里的元素),基本就是前面某个标签忘闭合了
最易被忽略的一点:HTML5允许部分标签的结束标签“省略”(如 、),但这只是语法糖,**不等于可以随意不写**——省略规则有严格上下文限制,新手建议一律显式闭合,避免把“允许”当成“推荐”。
立即学习“前端免费学习笔记(深入)”;











