Question

W3C validator不喜欢non-void元素上的自动关闭标记（以“/>”结尾的标记）。（Void元素是那些可能不包含任何内容的元素。）它们在HTML5中是否仍然有效？

接受 void元素的一些示例：

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

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

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

注意： W3C验证程序实际上接受无效的自动关闭代码：由于简单的拼写错误，作者最初遇到了问题（{ {1}}代替\>）。 但是，自动关闭标签在HTML5中通常不是100％有效，答案详细说明了各种HTML风格的自动关闭标签问题。

Answer 1

在 HTML 4 中，<foo /（是的，完全没有>）表示<foo>（导致 含义 >（即 >）和<title/hello/含义<title>hello</title>）。这是 SGML 规则，浏览器支持的工作非常差，the spec advises authors to avoid the syntax。
在 XHTML ，<foo /> means <foo></foo>中。这是一个适用于所有XML文档的 XML 规则。也就是说，XHTML通常用作text/html（历史上至少）由浏览器使用与作为application/xhtml+xml的文档不同的解析器处理。 W3C将compatibility guidelines作为text/html提供给XHTML。（基本上：当元素定义为EMPTY时（仅在HTML规范中禁止结束标记），仅使用自动关闭标记语法。）
在 HTML5 中，<foo /> depends on the type of element的含义。
- 在指定为 void elements 的HTML元素上（实质上是“在HTML5之前存在且禁止包含任何内容的元素”），仅禁止结束标记。允许使用开始标记末尾的斜杠，但没有任何意义。它只是沉迷于XML的人（和语法荧光笔）的语法糖。
- 在其他HTML元素上，斜杠是一个错误，但错误恢复将导致浏览器忽略它并将标记视为常规开始标记。这通常会导致缺少结束标记，导致后续元素成为子元素而不是兄弟元素。
- 外来元素（从SVG等XML应用程序导入）将其视为自动关闭语法。

Answer 2

正如Nikita Skvortsov所指出的那样，一个自我关闭的div将无法验证。这是因为div是普通元素，而不是 void元素。

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

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

“/”在上述代码中完全是可选的，因此<img/>与<img>没有区别，但<img></img>无效。

*注意：外国元素也可以自我关闭，但我不认为这是答案的范围。

Answer 3

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

很可能，您的网页将作为text/html提供，它遵循更宽松的HTML语法。在这些情况下，HTML5允许某些开始标记在终止＆gt;之前具有可选/。在这些情况下，/是可选的并被忽略，因此<hr>和<hr />是相同的。 HTML规范称这些“void elements”，并给出一个有效的列表。严格地说，可选/仅在这些void元素的开始标记内有效;例如， 和<hr />是有效的HTML5，但不是。

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

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

Answer 4

HTML5基本上表现得好像没有尾随斜杠。 HTML5语法中没有自闭标签。

非虚空元素（例如，<div/>上的自动关闭标记根本不起作用。尾部斜杠将被忽略，这些将被视为开始标记。这可能会导致嵌套问题。

无论斜杠前面是否有空格，都是如此：和<div />也不会出于同样的原因。
void 元素（例如 或<img src="" alt=""/> ）上的自动关闭代码将起作用，但仅限于忽略尾部斜杠，在这种情况下恰好会导致正确的行为。

结果是，在旧的“XHTML 1.0作为text / html”中起作用的任何东西将继续像以前一样工作：在那里不接受非void标记上的尾部斜杠，而在void元素上的尾部斜杠工作

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

Answer 5

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

 和 都很好。

Answer 6

我会非常小心自闭项标签，如下例所示：

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

我的直觉是而不是

Answer 7

（非空）self-closing tags 在 HTML5 中是否有效？

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

以自闭标签   为例。

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

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

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

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

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

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

Answer 8

但是-仅作记录-这是无效的：

<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"/>

（非空）自动关闭标签在HTML5中有效吗？

8 个答案: