HTML自闭合空元素有哪些？

HTML中仅有14个由W3C HTML5标准明确定义的空元素（如br、img、input、hr、meta等），它们既无内容也无闭合标签，语义明确、行为严格——不是“内容为空的标签”就算空元素，而是规范硬性规定的不可嵌套、不可闭合的特殊存在；本文不仅清晰列出全部14个元素及其关键使用约束（如meta charset必须置于head最前、source须为picture/video首个子元素），更深入辨析了常见误区：br与hr虽同为空元素却语义与渲染截然不同，自闭合写法（如
）在HTML5中纯属冗余且可能误导初学者。掌握这些细节，才能写出真正语义正确、兼容稳健、无障碍友好的HTML代码。

HTML 空元素只有 14 个，是 W3C 标准明确定义的，不是“写了没有闭合标签就算空元素”——像 div 或 p 即使内容为空（

哪些标签属于标准空元素（W3C HTML5 官方列表）

HTML5 规范中明确列出的空元素共 14 个，它们**不能有结束标签、不能包含任何子节点（包括文本）**，浏览器解析时会直接忽略后续闭合写法（如 中的 被丢弃）。

• area：必须嵌套在 map 内，定义图像映射区域
• base：只允许出现在 head 中，设置页面相对 URL 基准
• br：强制换行，语义上表示换行点，不是段落分隔
• col：用于 colgroup 内定义表格列属性
• embed：嵌入外部资源（如 Flash、PDF），不支持 fallback 内容
• hr：语义为“主题分隔”，是块级空元素
• img：必须含 src 和 alt（后者不可为空字符串，除非有正当理由）
• input：表单控件，type 决定行为，无默认值时需显式设 value
• link：仅在 head 中有效，rel 和 href 通常必填
• meta：元数据，charset、name+content、http-equiv 三者选一
• param：配合 object 使用，传参给插件
• source：为 picture、audio、video 提供候选资源
• track：为媒体元素提供字幕、章节等文本轨道
• wbr：指示浏览器“此处可断行”，不影响渲染，仅影响换行策略

为什么 hr 和 br 是空元素但表现不同

二者都无内容、无闭合标签，但语义和默认 CSS 表现差异大：

• br 是行内元素，只影响当前文本流，连续多个
会产生多行空白，但不会触发新 BFC
• hr 是块级元素，自带上下 margin，且现代浏览器默认加 border，它代表一次“主题中断”，不是视觉装饰
• 误用 br 替代段落（比如用

  第一段

  
  
  

  第二段

  ）会导致语义混乱，屏幕阅读器可能跳过或误读

自闭合写法 在 HTML 中是否必要

不必要，且容易引发误解：

• HTML5 解析器完全忽略斜杠， 和 行为完全一致
• IDE 自动补全或 Prettier 默认加 /，只是为了兼容 XHTML 风格或提升可读性，不是规范要求
• 混淆点：有人以为加了 / 就“更标准”，其实反而可能误导初学者认为这是“闭合动作”——而空元素根本不存在“闭合”概念
• 唯一要注意的是：XHTML 或 XML 模式下（如 SVG in HTML），必须用自闭合形式，否则解析失败

真正容易被忽略的是 meta 的 charset 必须出现在 head 最前面（甚至早于 title），否则可能导致乱码；还有 source 必须作为 picture/video 的**首个子元素**，否则会被忽略——这些不是空元素本身的限制，而是上下文规则。

到这里，我们也就讲完了《HTML自闭合空元素有哪些？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！