（非无效）自闭合标签在 HTML5 中有效吗？答案

【问题标题】：Are (non-void) self-closing tags valid in HTML5?（非无效）自闭合标签在 HTML5 中有效吗？
【发布时间】：2011-04-03 06:06:55
【问题描述】：

W3C validator (Wikipedia) 不喜欢 non-void 元素上的自闭合标签（以“/>”结尾的标签）。（Void elements 可能永远不会包含任何内容。）它们在 HTML5 中仍然有效吗？

接受 void 元素的一些例子：

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

拒绝非空元素的一些例子：

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

_{注意：

W3C 验证器实际上接受 void 自闭合标签：作者最初遇到问题是因为一个简单的拼写错误（\> 而不是/>）；但是，一般来说，自关闭标签在 HTML5 中并不是 100% 有效，并且答案详细说明了跨各种 HTML 风格的自关闭标签的问题。}

【问题讨论】：

@Ben：哦，对不起，我认为你是对的。在这种情况下，我误解了最初的问题，我认为 OP 想知道自闭标签在 HTML5 中是否有效。但这意味着他只是在代码中打错字，或者他不知道如何适当地编写自闭合标签，这是有道理的，W3C 验证器将他的代码标记为无效。
为以后的读者节省时间：是的，问题中的语法不正确，不，您不应该更改它。 OP 有explicitly and justifiably explained why。由于它引起了提示此问题的验证错误，因此不应更正语法。
你们还在为斜线应该朝向哪个方向而还在争论不休吗？来吧。
@BoltClock 是的，还在战斗。伙计们：如果这个问题是关于\>，它应该作为一个无用的修复我的错字问题关闭。答案全部地址/>。 /> 版本是唯一有用的版本。顺其自然吧。
那么问题必须改写，因为 W3C 验证器实际上接受自闭合标签。很难以这种方式改写问题而不损害其在原始意图方面的完整性。因此，如果我们想遵守 SO 的规则，我们可能不得不牺牲诸如此类的问题的清晰度，即使看起来编辑问题是唯一明智的做法，为了更大的利益平均的。如果有很多其他问题类似的问题，我们可以开始另一个关于元的讨论。

标签： html syntax w3c-validation

【解决方案1】：

（理论上）在 HTML 4 中，<foo /（是的，根本没有>）表示<foo>（导致  表示 >（即@987654334 @) 和 <title/hello/ 表示 <title>hello</title>)。我使用“理论上”这个词是因为这是一个浏览器在支持方面做得很差的 SGML 规则。几乎没有支持（我只在emacs-w3m 看到过它的工作）以至于the spec advises authors to avoid the syntax。
在 XHTML 中，<foo /> means <foo></foo>。这是适用于所有 XML 文档的 XML 规则。也就是说，XHTML 通常被用作text/html，它（至少从历史上看）由浏览器使用与application/xhtml+xml 提供的文档不同的解析器来处理。 W3C 为 XHTML 提供了 compatibility guidelines 以遵循 text/html。（本质上：仅当元素被定义为 EMPTY 时才使用自闭合标记语法（并且 HTML 规范中禁止结束标记）。
在HTML5中，<foo />depends on the type of element的含义：
- 在指定为 void elements 的 HTML 元素（本质上是“在 HTML5 之前存在且被禁止包含任何内容的元素”）上，简单地禁止结束标记。开始标签末尾的斜线是允许的，但没有意义。对于沉迷于 XML 的人（和语法高亮者）来说，它只是语法糖。
- 在其他 HTML 元素上，斜杠是 an error，但错误恢复会导致浏览器忽略它并将该标记视为常规开始标记。这通常会以缺少结束标记而告终，从而导致后续元素成为子元素而不是兄弟元素。
- 外来元素（从 SVG 等 XML 应用程序导入）将其视为自闭合语法。

【讨论】：

“...沉迷于 XML 的人。”。您似乎暗示 XML 合规性不好。然而，HTML5 的最终结果似乎是我们仍然必须处理尖括号（即 XML 的大部分不便之处），同时它使得使用基于 XML 的工具（例如模板工具或各种处理器）变得更加困难）。即使从生成的角度来看，<object data="..." /> 和 <img src="..."></src> 似乎也不好，而 <object data="..."></object> 和 <img src="..." /> 是，这使得工具一致性变得更加困难。这看起来像是双输的局面。
@Bruno — HTML 早于 XML。让人们转向 XHTML 的努力失败了。使用text/html，浏览器不会赋予斜杠任何特殊含义，因此包含它没有实际用途。它只是为了让那些无法摆脱这种习惯的人看起来更像 XML。
@Quentin 我并不完全不同意。我只是觉得有效的 XML 等价物不一定是有效的 HTML5（例如 <img ...></img> 而不是 <img ...> 或 <img ... />）有点遗憾。由于 HTML5 通常不那么严格（可能是 XHTML 失败的原因），它很可能容忍像 <img ...></img> 这样的东西。不幸的是，它没有，因此基于 XML 的模板生成器需要知道如何区分 void 元素或自闭合元素的产生：您甚至不能有一条规则将所有空元素写为<tag></tag>。
XHTML 在 HTML 5 出现之前就失败了，而且你不能有长格式的空元素，因为早于 XHTML 的浏览器错误纠正会做一些事情，比如将  视为   所以@ 987654355@ 将是双换行符。（并且向后兼容现实世界中的不良标记（如）是 HTML 5 的设计目标之一）。
FROM W3C: Void 元素：area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr "Void 元素只有一个开始标记；不得为 void 元素指定结束标记。” w3.org/TR/html5/syntax.html#void-elements

【解决方案2】：

正如 Nikita Skvortsov 指出的那样，自动关闭的 div 不会验证。这是因为 div 是 普通元素，而不是 void 元素。

根据the HTML5 spec，不能有任何内容的标签（称为void 元素）可以自动关闭*。这包括以下标签：

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

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

*注意：foreign elements 也可以自动关闭，但我认为这不在此答案的范围内。

【讨论】：

IE10 的开发者工具给了我“HTML1500：标签不能自动关闭。使用明确的关闭标签。”在线知道为什么会这样吗？
好的，我发现自闭合标签不应该有斜线（删除它可以解决我的错误）。引用：tiffanybbrown.com/2011/03/23/…
规格已更改。现在，当用作 HTML 5 文档类型时，“void”或“self-closing”元素应该不包含斜线。但是，如果它作为 XHTML 提供，则可能需要结束斜杠（在这种情况下检查文档）。在实际使用中，即使包含关闭 /，页面通常也会按预期显示，但这不是保证（它取决于浏览器有效地为您重写代码，并按照您的意图解释它。）此外，如果由于某种原因您的页面需要通过 HTML 5 验证，如果您关闭 void 元素的标签，它可能不会通过。
关于@SherylHohman 的评论，我不相信规范已经改变（或者如果改变了，它已经改变了）。请参阅w3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) - 无效（或外来）元素可能仍包含斜杠。

【解决方案3】：

在实践中，在 HTML 中使用自闭合标签应该会像您期望的那样工作。但是，如果您担心编写 valid HTML5，您应该了解这些标签的使用在您可以使用的两种不同的两种语法形式中是如何表现的。 HTML5 定义了 HTML 语法和 XHTML 语法，它们相似但不相同。使用哪一种取决于 Web 服务器发送的媒体类型。

您的页面很可能以text/html 的形式提供服务，它遵循更宽松的 HTML 语法。在这些情况下，HTML5 允许某些开始标签在终止 > 之前有一个可选的 /。在这些情况下，/ 是可选的并且被忽略，所以<hr> 和<hr /> 是相同的。 HTML 规范称这些“无效元素”为有效元素的列表。严格来说，可选的 / 只在这些 void 元素的开始标签内有效；例如，  和 <hr /> 是有效的 HTML5，但  不是。

HTML5 规范明确区分了对 HTML 作者和 Web 浏览器开发人员的正确性，第二组被要求接受各种无效的“遗留”语法。在这种情况下，这意味着兼容 HTML5 的浏览器将接受非法的自闭合标签，例如 ，并按照您的预期呈现它们。但对于作者而言，该页面将不是是有效的 HTML5。（更重要的是，使用这种非法语法得到的 DOM 树可能会被严重搞砸；例如，自我关闭的 标签往往会搞砸很多）。

（在您的服务器知道如何将 XHTML 文件作为 XML MIME 类型发送的特殊情况下，页面需要符合 XHTML DTD 和 XML 语法。这意味着自动关闭标签是必需的 对于那些这样定义的元素。）

【讨论】：

“在实践中，在 HTML 中使用自闭标签应该会像你期望的那样工作”：<a name="foo" /> 是一个很好的例子，说明了它不能做到的地方。您将获得以下文本而不是锚点，而是将其转换为链接。对于<A> 标签，不要使用自闭合语法非常重要

【解决方案4】：

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

像、<div/> 这样的non-void 元素上的自动关闭标签根本不起作用。尾部的斜杠将被忽略，这些将被视为开始标签。这可能会导致嵌套问题。

无论斜线前面是否有空格，这都是正确的： 和 <div /> 也因相同原因不起作用。
void 元素（如   或 <img src="" alt=""/> 上的自闭合标签会起作用，但只是因为尾部斜杠被忽略了，在这种情况下会发生这种情况以产生正确的行为。

结果是，在旧的“XHTML 1.0 作为文本/html”中工作的任何内容都将像以前一样继续工作：非 void 标记上的尾部斜杠也不被接受，而 void 元素上的尾部斜杠工作。

还有一点需要注意：可以将 HTML5 文档表示为 XML，这有时被称为“XHTML 5.0”。在这种情况下，将始终处理 XML 应用和自闭合标签的规则。它总是需要使用 XML mime 类型。

【讨论】：

【解决方案5】：

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

  和   都可以。

【讨论】：

根据 HTML5 规范，自闭合语法 (/>) 不能用于非空 HTML 元素。
问题是关于非空元素上的自闭合标签，例如或<div/>。
最初的问题并不是专门针对非空元素。更像是，你还能像在 XHTML 中一样使用 <... />，还是必须在 HTML5 中删除 /。之后问题被多次更改。
无论哪种方式，答案都是斜杠将被忽略，这会破坏未声明为 void 的元素，但会与 void 元素兼容。

【解决方案6】：

如本例所示，我会非常小心地使用自闭合标签：

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

我的直觉应该是

【讨论】：

这在接受的答案中有所描述：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.

【解决方案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"/>

【讨论】：

那是因为 svg 是用 xml 编写的，而不是 html。它使用不同的解析规则

【解决方案8】：

（非无效）self-closing tags 在 HTML5 中有效吗？

当然，它们是有效的，但几乎没有修改。

以自闭标签 为例。

即使你写 或 ，它们最终也会在浏览器中转换为 。

在以/> 或 /> 结尾的自闭合标签中，/（斜线）和空格将被忽略。

举个例子，看看它在浏览器中的样子。

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

以上代码在浏览器中将如下图所示。

您可以看到所有转换为 。所以关闭自闭标签是你的选择，但它们是完全有效的。

【讨论】：