HTML5中,(非空)自闭合标签是否有效?

768

W3C验证器维基百科)不喜欢在非空元素上使用自闭合标签(以“/>”结尾的标签)。(无内容元素是指可能永远不包含任何内容的元素。) 它们在HTML5中是否仍然有效?

一些被接受的无内容元素示例:

<br />
<img src="" />
<input type="text" name="username" />

以下是一些被拒绝的非空元素示例:

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
注意:
W3C验证器实际上接受空自闭标签:作者最初由于简单的拼写错误(\>而不是/>)而遇到问题;然而,在HTML5中,自闭标签在一般情况下并不完全有效,答案详细阐述了各种HTML版本中关于自闭标签的问题。

2
@Ben:哦,抱歉,我想你是对的。在这种情况下,我误解了原始问题,我以为OP想知道自闭合标签在HTML5中是否有效。但这意味着他在代码中只是打错了字,或者他不知道如何适当地编写自闭合标签,这就解释了为什么W3C验证器将他的代码标记为无效。 - Sk8erPeter
19
为了节省未来读者的时间:是的,问题中的语法是不正确的,但不应更改它。OP已经明确并有理由地解释了为什么。由于它引起了引起这个问题的验证错误,因此不应该更正语法。 - Jordan Gray
3
你们还在争论斜线应该朝哪个方向吗?得了吧。 - BoltClock
4
@BoltClock 是的,仍在争论。各位:如果这个问题问的是 \>,那么它应该被关闭,因为这只是个无用的拼写错误修正问题。所有回答都解决了 /> 的问题。/> 版本才是有用的,就让它存在吧。 - Gilles 'SO- stop being evil'
2
那么问题就必须重新措辞,因为W3C验证器实际上接受自闭合标签。很难在不损害其与原意相一致的情况下重新措辞问题。因此,如果我们想遵守SO的规则,我们可能必须在这种问题中牺牲清晰度,尽管编辑问题似乎是唯一明智的选择,为了平均而言更好的利益。如果还有许多类似问题,我们可以在元讨论区开始另一个讨论。 - Sergey Orshanskiy
显示剩余3条评论
8个回答

1337
  • 理论上,在HTML 4中,<foo /(是的,完全没有>)表示<foo>(这导致<br />的意思是<br>>(即<br>&gt;)和<title/hello/的意思是<title>hello</title>)。我使用术语“理论上”,因为这是一个SGML规则,浏览器对其支持非常差。支持非常少(我只在emacs-w3m中看到它起作用),所以规范建议作者避免使用该语法

  • XHTML中,<foo />表示<foo></foo>。这是适用于所有XML文档的XML规则。尽管如此,XHTML通常作为text/html提供,这(至少在历史上)使用与作为application/xhtml+xml提供的文档不同的解析器由浏览器处理。 W3C提供了兼容性指南以遵循XHTML作为text/html的规则。(基本上:仅在元素被定义为EMPTY时(并且HTML规范中禁止使用结束标记)才使用自闭合标签语法)。

  • HTML5中,<foo />的含义取决于元素类型

    • 对于指定为void元素(基本上是“在HTML5之前存在且禁止具有任何内容的元素”)的HTML元素,结束标记被简单地禁止。允许在开始标记的结尾处使用斜杠,但没有意义。这只是对XML上瘾的人(和语法突出显示器)的语法糖。
    • 对于其他HTML元素,斜杠是一个错误,但错误恢复将导致浏览器忽略它并将标记视为常规开始标记。这通常会导致丢失结束标记,从而使后续元素成为子代而不是同级。
    • 外部元素(从SVG等XML应用程序导入)将其视为自闭合语法。

41
“*... who are addicted to XML.”的翻译是:“...沉迷于XML的人*”。您似乎在暗示XML兼容性很差。然而,在HTML5的最终结果中,我们仍然必须处理尖括号(即具有大多数XML不便之处的内容),而且这使得使用基于XML的工具更加困难(例如模板工具或各种处理器)。甚至从生成代码的角度来看,<object data =“ ...”/><img src =“ ...”></src>并不正确,而<object data =“ ...”> </object><img src =“ ...”/>则可以,这使得工具的一致性变得更加困难。这看起来像是一个双输的局面。 - Bruno
19
HTML早于XML。促使人们转向XHTML的努力失败了。在"text/html"中,浏览器不会赋予斜杠任何特殊意义,因此包含斜杠没有任何实际用途。它只是为了让习惯于XML的人看起来更像XML而已。 - Quentin
12
@Quentin 我并不完全不同意你的观点。我只是觉得有点可惜,一个有效的 XML 等价物不一定是有效的 HTML5(例如,<img ...></img> 而不是 <img ...><img ... />)。由于 HTML5 的要求相对宽松(可能是为什么 XHTML 失败的原因),它很可能可以容忍 <img ...></img> 这样的写法。不幸的是,实际情况并非如此,因此基于 XML 的模板生成器需要知道如何区分空元素或自闭合元素的产生:你甚至不能制定一个规则来表示将所有空元素都写成 <tag></tag> - Bruno
9
在HTML 5出现之前,XHTML已经失败了。你不能有长格式的空元素,因为在XHTML之前的浏览器错误纠正功能会将</br>视为<br>,所以<br></br>会产生双重换行。而HTML 5的设计目标之一是向后兼容真实世界中不良标记(如</br>)。 - Quentin
7
在其他 HTML 元素上,斜杠是一个错误,但错误恢复将使浏览器忽略它并将标记视为常规起始标记。这通常会导致缺少结束标记,从而使后续元素成为子元素而不是同级元素。啊,原来这就是我刚刚花了五个小时将我的 HTML 和 CSS 剖析到原子级别以查找一个简单的语法问题的原因,本来这个问题可以在两秒钟内在控制台中被指出的……我要回去写 C 了 (╯°□°)╯︵ ┻━┻ - CCJ
显示剩余5条评论

439

自闭合的 div 标签将无法通过验证。这是因为 div 是一个普通元素,而不是空元素

根据 HTML5 规范,不能包含任何内容的标记(称为空元素)可以进行自闭合*。 这些标记包括以下标记:

area, base, br, col, embed, hr, img, input, 
link, meta, param, source, track, wbr

上述标签中的“/”是完全可选的,因此<img/><img>没有区别,但<img></img>是无效的。

*注意:foreign elements也可以是自闭合的,但我认为这不在本答案的范围之内。


1
IE10的开发者工具在我这里报错"HTML1500: Tag cannot be self-closing. Use an explicit closing tag.",出现在这一行<meta charset="UTF-8" />。你有什么想法吗? - James in Indy
1
好的,我发现自闭合标签不应该有斜杠(去掉它可以修复我的错误)。引用:http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/ - James in Indy
规格已更改。现在,在作为HTML 5文档类型提供时,“void”或“自闭合”元素不应包括斜杠。但是,如果它作为XHTML提供,则可能需要关闭斜杠(在这种情况下,请检查文档)。在实际使用中,即使包括了结束斜杠,页面通常也会按预期显示,但这并不保证(它取决于浏览器有效地为您重写代码并解释它的方式)。此外,如果由于某种原因您的页面需要通过HTML 5验证,则如果关闭void元素的标记,则可能无法通过验证。 - SherylHohman
2
关于@SherylHohman的评论,我不认为规范已经改变(或者如果它改变了,那么它已经改回来了)。请参见https://www.w3.org/TR/html5/syntax.html#start-tags(8.1.2.1.6)-空(或外部)元素仍然可以包括斜杠。 - ChrisC

65
实际上,在HTML中使用自闭合标签应该与您期望的一样工作。但是如果您关心编写有效的HTML5,则应了解在两种不同的语法形式中使用这些标记的行为。HTML5定义了HTML语法和XHTML语法,它们相似但不完全相同。使用哪种取决于Web服务器发送的媒体类型。
很可能,您的页面正在作为“text/html”提供,这遵循更宽松的HTML语法。在这些情况下,HTML5允许某些起始标记在其终止符号>之前有可选的/。在这些情况下,/是可选的并被忽略,因此<hr><hr />是相同的。HTML规范将这些称为“空元素”,并给出了一个有效列表。严格来说,斜杠/仅在这些空元素的起始标记内部是有效的;例如,<br /><hr />是有效的HTML5,但<p />不是。
HTML5规范明确区分了HTML作者和Web浏览器开发人员的正确性,第二组需要接受各种无效的“遗留”语法。在这种情况下,这意味着符合HTML5的浏览器将接受非法的自闭合标签,例如<p />,并将它们呈现为您可能期望的样子。但是对于作者来说,该页面不是有效的HTML5。(更重要的是,使用这种非法语法获得的DOM树可能会严重混乱;例如,自闭合的<span />标记往往会使事情变得混乱极其)。
(在服务器知道如何将XHTML文件作为XML MIME类型发送的不寻常情况下,页面需要符合XHTML DTD和XML语法。这意味着对于那些被定义为此类元素的元素,必须使用自闭合标签。)

2
在实践中,使用HTML中的自闭合标签应该像您预期的那样工作:“<a name="foo" />”是一个很好的例子,但它并不总是有效。如果使用自闭合语法,您将得到以下文本转换为链接的结果,而不是锚点。对于“<A>”标签,非常重要的是不要使用自闭合语法。 - Simon Kissane

20

HTML5基本上表现得好像没有尾随斜杠一样。在HTML5语法中,不存在自闭合标签。

  • 非空元素(如<p/><div/>)上使用自闭合标签将根本不起作用。尾随斜线将被忽略,这些标签将被视为开始标签。这可能会导致嵌套问题。

    这是无论是否在斜线前面有空格都是正确的:<p /><div />也不能工作,原因相同。

  • 空元素上(如<br/><img src="" alt=""/>),自闭合标签将工作,但只是因为尾随斜线被忽略,在这种情况下它恰好导致了正确的行为。

结果是,任何在旧的“以text/html形式提供的XHTML 1.0”中工作的内容仍将像以前一样工作:在非空标签上使用尾随斜线也在那里不被接受,而在空元素上使用尾随斜线是有效的。

还有一点需要注意:可以将HTML5文档表示为XML,并且有时被称为“XHTML 5.0”。在这种情况下,XML规则适用,自闭合标签将始终被处理。它总是需要以XML MIME类型提供。


6

自闭合标签在HTML5中是有效的,但不是必需的。

<br><br />都可以使用。


14
根据HTML5规范,非空的HTML元素不能使用自闭合语法(/>)。 - naXa stands with Ukraine
4
这个问题是关于在非空元素上使用自闭合标签,例如 <p/><div/> - thomasrutter
2
最初的问题并不是关于非void元素的。更像是,你是否仍然可以像在XHTML中一样使用<... />,或者在HTML5中必须删除/。之后问题被多次修改过。 - Nick
无论怎样,答案是斜杠将被忽略,这会破坏未声明为空的元素,但对空元素兼容。 - thomasrutter

5

我建议小心使用自闭合标签,因为这个例子可以证明:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

我的直觉是应该使用<span></span><span></span>而不是其他的。


2
这在被接受的答案中有所描述:对于除void之外的HTML元素,斜杠是一个错误,但错误恢复会导致浏览器忽略它并将标记视为常规开始标记。这通常会导致缺少结束标记,从而使后续元素成为子代而不是兄弟节点。 - Palec

1
非空自闭合标签在HTML5中是否有效? 当然,它们是有效的,但需要进行一些修改。
以自闭合标签<br>为例。
即使您编写<br/>或<br />,它们最终都会在浏览器中转换为<br>。
在以/>或 />结尾的自闭合标签中,/(斜杠)和空格将被简单忽略。
举个例子,让我们看看它在浏览器中的效果。

<p>This is paragraph with &lt;br&gt;<br> and &lt;br/&gt;<br/> and then &lt;br /&gt;<br />.</p>

上面的代码在浏览器中将会显示如下图像。

enter image description here

您可以看到所有转换为<br>。因此,关闭自闭合标记是您的选择,但它们完全有效。

1
然而,仅供记录,这是无效的:


<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

这里加上一个斜线就可以使它再次有效:

    <rect width="800" height="400" fill="#000"/>

5
这是因为SVG是使用XML编写的,而不是HTML。它使用不同的解析规则。 - Electric Coffee

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接