提问人： 提问时间：8/24/2010 最后编辑：30 revs, 25 users 15%Ardent Coder 更新时间：4/10/2022 访问量：325670
（非无效）自闭合标记在 HTML5 中是否有效？
Are (non-void) self-closing tags valid in HTML5?
问：
W3C 验证器（维基百科）不喜欢在非 void 元素上使用自闭合标签（以 “” 结尾的标签）。（void 元素是指那些可能不包含任何内容的元素。它们在 HTML5 中仍然有效吗？/>
可接受的 void 元素的一些示例：
<br />
<img src="" />
<input type="text" name="username" />
被拒绝的非 void 元素的一些示例：
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
W3C 验证器实际上接受 void 自闭合标签：作者最初因为一个简单的拼写错误（
\>而不是 />）而遇到了问题;然而，自闭合标签在 HTML5 中通常不是 100% 有效的，答案详细阐述了各种 HTML 风格的自闭合标签的问题。
答：
1337赞
Quentin
8/24/2010
#1
（理论上）在 HTML 4 中，（是的，根本没有）意味着（这导致意义（即）和意义）。我使用“理论上”一词，因为这是浏览器在支持方面做得非常糟糕的SGML规则。支持太少了（我只见过它在 emacs-w3m 中工作），以至于规范建议作者避免使用语法。
<foo /><foo><br /><br>><br>><title/hello/<title>hello</title>在 XHTML 中，<
foo/> 表示 <foo></foo>。这是适用于所有 XML 文档的 XML 规则。也就是说，XHTML通常（至少在历史上）由浏览器使用与文档不同的解析器进行处理。W3C 提供了 XHTML 的兼容性准则。（本质上：仅当元素定义为 EMPTY（并且 HTML 规范中禁止使用结束标记）时，才使用自闭合标记语法）。text/htmlapplication/xhtml+xmltext/html在 HTML5 中，含义取决于元素的类型：
<foo />
评论
41赞
Bruno
10/23/2014
"。他们沉迷于XML。您似乎认为 XML 合规性很糟糕。然而，HTML5 的最终结果似乎是，我们仍然必须处理尖括号（即 XML 的大部分不便之处），而它使基于 XML 的工具（例如模板工具或各种处理器）更难使用。即使从生成的角度来看，看起来 and are not OK， while and are ，这使得工具的一致性更加困难。这看起来像是双输的局面。<object data="..." /><img src="..."></src><object data="..."></object><img src="..." />
19赞
Quentin
10/23/2014
@Bruno — HTML 早于 XML。让人们迁移到 XHTML 的努力失败了。使用 ，浏览器不会赋予斜杠任何特殊含义，因此包含它没有任何实际目的。它只是为了让它看起来更像 XML 给那些无法摆脱习惯的人。text/html
12赞
Bruno
10/24/2014
@Quentin我并不完全不同意。我只是觉得有点可惜，有效的XML等价物不一定是有效的HTML5（例如 而不是 或 ）。由于 HTML5 实际上没有那么严格（可能是 XHTML 失败的原因），它很可能容忍类似 .不幸的是，事实并非如此，因此基于 XML 的模板生成器需要知道如何区分 void 元素或自闭合元素的产生：您甚至不能有一个规则来表示将所有空元素都写为 .<img ...></img><img ...><img ... /><img ...></img><tag></tag>
9赞
Quentin
10/24/2014
XHTML 在 HTML 5 出现之前就失败了，而且你不能有长格式的空元素，因为在 XHTML 之前的浏览器纠错会做一些事情，比如把 As So 视为双换行符。（向后兼容现实世界的不良标记（如）是 HTML 5 的设计目标之一）。</br><br><br></br></br>
8赞
CCJ
7/5/2020
“在其他 HTML 元素上，斜杠是一个错误，但错误恢复将导致浏览器忽略它并将该标签视为常规开始标签。这通常会导致缺少结束标记，导致后续元素是子元素而不是兄弟姐妹。 啊，这就是为什么我刚刚浪费了 5 个小时的时间将我的 HTML 和 CSS 剖析到它们的原子，以找到一个简单的语法问题，这个问题可以在两秒钟内在控制台中调用......我要回到 C （╯°□°）╯（ ┻━┻
6赞
Nick
8/25/2010
#2
自闭合标记在 HTML5 中有效，但不是必需的。
<br>而且都很好。<br />
评论
14赞
naXa stands with Ukraine
7/30/2015
根据 HTML5 规范，自闭合语法 （） 不能用于非 void HTML 元素。/>
4赞
thomasrutter
6/28/2016
问题是关于非 void 元素上的自闭合标签，例如 或 。<p/><div/>
2赞
Nick
9/20/2017
最初，问题并不是专门针对非无效元素的。它更像是，您仍然可以在 XHTML 中使用，或者您是否必须在 HTML5 中删除它。之后，这个问题被多次更改。<... />/
0赞
thomasrutter
7/10/2019
无论哪种方式，答案都是斜杠将被忽略，这将破坏未声明为 void 但与 void 元素兼容的元素。
65赞
Michael Edenfield
2/19/2011
#3
在实践中，在 HTML 中使用自闭合标记应该像您预期的那样工作。但是，如果您担心编写有效的 HTML5，您应该了解在您可以使用的两种不同的语法形式中使用此类标记的行为。HTML5 定义了 HTML 语法和 XHTML 语法，它们相似但不完全相同。使用哪一个取决于 Web 服务器发送的媒体类型。
更有可能的是，您的页面被提供为 ，它遵循更宽松的 HTML 语法。在这些情况下，HTML5 允许某些开始标记在终止>之前具有可选的 /。在这些情况下，/ 是可选的，并且被忽略，因此 和 是相同的。HTML 规范称这些为“void 元素”，并给出有效元素的列表。严格来说，可选的 / 仅在这些 void 元素的开始标记中有效;例如，和 是有效的 HTML5，但不是。text/html<hr><hr /><br /><hr /><p />
HTML5 规范明确区分了 HTML 作者和 Web 浏览器开发人员的正确性，第二组要求接受各种无效的“遗留”语法。在这种情况下，这意味着符合 HTML5 的浏览器将接受非法的自闭合标记，例如 ，并按照您的预期呈现它们。但对于作者来说，该页面将不是有效的HTML5。（更重要的是，你从使用这种非法语法中得到的 DOM 树可能会被严重搞砸;例如，自闭合标签往往会把事情搞砸很多）。<p /><span />
（在服务器知道如何将 XHTML 文件作为 XML MIME 类型发送的异常情况下，页面需要符合 XHTML DTD 和 XML 语法。这意味着那些定义自闭合的元素需要自闭合标记。
评论
2赞
Simon Kissane
4/5/2021
“在实践中，在 HTML 中使用自闭合标签应该像你所期望的那样工作”：是一个很好的例子。您将看到以下文本转换为链接，而不是锚点。对于标记，不要使用自闭合语法非常重要<a name="foo" /><A>
439赞
Red Orca
10/22/2011
#4
自动关闭的 div 将不进行验证。这是因为 div 是普通元素，而不是 void 元素。
根据 HTML5 规范，不能包含任何内容的标签（称为 void 元素）可以自关闭*。这包括以下标记：
area, base, br, col, embed, hr, img, input,
link, meta, param, source, track, wbr
但是，“/”在上述标记上是完全可选的，因此与 没有什么不同，但无效。<img/><img><img></img>
*注意：外来元素也可以是自闭合的，但我认为这不在这个答案的范围之内。
评论
1赞
James in Indy
10/14/2013
IE10 的开发人员工具给了我“HTML1500：标签不能是自动关闭的。使用显式结束标记“在<meta charset=”UTF-8“/>行上 知道为什么会这样吗？
1赞
James in Indy
10/14/2013
好的，我发现自关闭标签不应该有斜杠（删除它可以修复我的错误）。引用：tiffanybbrown.com/2011/03/23/...
0赞
SherylHohman
1/29/2019
规范已更改。现在，“void”或“self-closesing”元素在用作 HTML 5 文档类型时不应包含斜杠。但是，如果它以 XHTML 的形式提供，则可能需要右斜杠（在这种情况下，请查看文档）。在实际使用中，即使包含关闭，页面通常也会按预期显示，但这是不可预测的（这取决于浏览器有效地为您重写代码，并按照您的预期解释它。此外，如果由于某种原因，您的页面需要通过 HTML 5 验证，那么如果您关闭 void 元素的标记，则可能无法通过。/
2赞
ChrisC
2/25/2019
关于@SherylHohman的评论，我不相信规范发生了变化（或者如果发生了变化，它已经变回来了）。参见 w3.org/TR/html5/syntax.html#start-tags （8.1.2.1.6） - void（或外来）元素仍可包含斜杠。
20赞
thomasrutter
#5
HTML5 基本上表现得好像尾部斜杠不存在一样。HTML5 语法中没有自闭合标签这样的东西。
非 void 元素上的自闭合标签（如 ）根本不起作用。尾部斜杠将被忽略，这些斜杠将被视为开始标记。这可能会导致嵌套问题。
<p/><div/>无论斜杠前面是否有空格，这都是正确的：并且由于同样的原因也不起作用。
<p /><div />像 或 这样的 void 元素上的自闭合标签会起作用，但只是因为尾部斜杠被忽略了，在这种情况下，这恰好会导致正确的行为。
<br/><img src="" alt=""/>
结果是，在旧的“XHTML 1.0 用作文本/html”中工作的任何内容都将继续像以前一样工作：那里也不接受非 void 标签上的尾部斜杠，而 void 元素上的尾部斜杠有效。
还有一点需要注意：可以将 HTML5 文档表示为 XML，这有时被称为“XHTML 5.0”。在这种情况下，XML 的规则适用，并且将始终处理自闭合标记。它始终需要使用 XML MIME 类型。
5赞
Andreas Herd
#6
我会非常小心地使用自关闭标记，因为这个例子表明：
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赞
Palec
5/21/2017
这在接受的答案中有所描述：On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
1赞
Leo
#7
但是 - 仅供记录 - 这是无效的：
<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赞
Electric Coffee
8/20/2019
那是因为 svg 是用 xml 编写的，而不是 html。它使用不同的解析规则
1赞
2 revs, 2 users 97%Satish Chandra Gupta
#8
（非无效）自闭合标记在 HTML5 中是否有效？
当然，它们是有效的，但几乎没有修改。
以自闭合标签为例。<br>
即使你写了，或者它们最终会在浏览器中转换。<br/><br /><br>
在以 或 结尾的自闭合标记中，（斜杠）和空格将被忽略。/> />/
举个例子，让我们看看它在浏览器中的样子。
<p>This is paragraph with <br><br> and <br/><br/> and then <br /><br />.</p>上面的代码在浏览器中如下图所示。
您可以看到全部转换为 .因此，您可以选择是否关闭自闭合标签，但它们是完全有效的。<br>
评论
\>/>/>