空元素

空元素(void element)是 HTML 中不能存在子节点(例如内嵌的元素或者文本节点)的元素。空元素只有开始标签且不能指定结束标签。

在 HTML 中,空元素不能有结束标签。例如,<input type="text"></input> 是无效的 HTML。相反,不能有任何子节点的 SVG 或 MathML 元素可以使用结束标签来代替 XML 开始标签中的自闭合标签语法。

HTMLSVGMathML 的规范都详细定义了每个元素能包含的具体内容。所以一些标签的组合是没有任何语义的。

尽管无法使用具有子元素的空元素标记,但可以使用 JavaScript 在这些元素的 DOM 中添加子节点。但这并不是一个被推荐的做法,因为其结果不可靠。

在 HTML 中有以下空元素:

自闭合标签

HTML 中不存在自闭合标签(<tag />)。

如果一个 HTML 元素的开始标签中存在尾随的 /(斜杠)字符,HTML 解析器会忽略该斜杠字符。请记住一些元素(例如 <script><ul>)的确需要结束标签。在这种情况下,在开始标签中添加尾随斜杠不会闭合元素。

但是,某些代码格式化工具会在空元素的开始标签中添加尾随斜杠字符,以使其兼容 XHTML 并更易读。例如,某些代码格式化工具会将 <input type="text"> 转换为 <input type="text" />

XMLXHTMLSVG 的空元素则必须使用自闭合标签(例如 <circle cx="50" cy="50" r="50" />)。

在 SVG 和 MathML 中,有任何子节点的元素不允许使用自闭合标签。在这种情况下,如果元素的开始标签被标记为自闭合,则该元素不能有结束标签。

备注: 如果开始标签中的尾随 /(斜杠)字符直接位于未使用引号包裹的属性值之后(两者之间没有空格),则该斜杠字符将成为属性值的一部分,而不是被解析器丢弃。例如,标记 <img src=http://www.example.com/logo.svg/> 会导致 src 属性的值为 http://www.example.com/logo.svg/——这会导致 URL 错误。

参见