（非无效）自动关闭标记在HTML5中有效吗？

在W3C验证不喜欢自闭标签（那些最终以“ />上“）非空元素。（无效元素是可能永远不包含任何内容的元素。）它们在HTML5中仍然有效吗？

可接受的 void元素的一些示例：

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

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

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

注意： W3C验证器实际上接受无效的自动关闭标签：由于简单的错字（\>不是/>），作者最初遇到了问题；但是，自关闭标签在HTML5中通常不是100％有效的，答案详细说明了各种HTML样式的自关闭标签。

• 在HTML 4中，<foo /（是，完全没有>）意味着<foo>（导致<br />含义<br>>（即<br>&gt;）和<title/hello/意义<title>hello</title>）。这是一条SGML规则，浏览器在支持方面做得很差，并且该规范建议作者避免使用语法。

• 在XHTML中，<foo />是指<foo></foo>。这是一条适用于所有XML文档的XML规则。也就是说，XHT​​ML通常用作text/html（至少在历史上）由浏览器使用与用作文档的解析器不同的解析器来处理的HTML application/xhtml+xml。W3C提供了XHTML遵循的兼容性指南text/html。（本质上：仅当元素定义为EMPTY时才使用自闭标签语法（并且HTML规范中禁止使用结束标签））。

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

  • 在指定为void元素的 HTML元素上（本质上是“在HTML5之前存在并且被禁止包含任何内容的元素”），最终标签被简单地禁止了。开始标记末尾的斜杠是允许的，但没有任何意义。对于那些沉迷于XML的人（和语法突出显示）来说，它只是语法糖。
  • 在其他HTML元素上，斜杠是一个错误，但是错误恢复将导致浏览器将其忽略，并将该标记视为常规的开始标记。这通常会导致缺少结束标记，从而导致后续元素成为子元素而不是兄弟元素。
  • 外部元素（从SVG等XML应用程序导入）将其视为自动关闭语法。

正如Nikita Skvortsov所指出的，自关闭div不会生效。这是因为div是普通元素，而不是void元素。

根据HTML5规范，不能包含任何内容的标签（称为void元素）可以自动关闭*。其中包括以下标签：

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

在上面的标记中，“ /”是完全可选的，因此<img/>与并无区别<img>，但<img></img>无效。

*注意：外部元素也可以自动关闭，但我认为此答案不在此范围内。

在实践中，在HTML中使用自动关闭标签应该可以按预期工作。但是如果您担心写作有效 HTML5，则应该了解此类标记的使用在两种可以使用的两种语法形式中的行为方式。HTML5定义了HTML语法和XHTML语法，它们相似但不相同。使用哪一种取决于Web服务器发送的媒体类型。

您的网页很有可能以的形式使用text/html，它遵循更宽松的HTML语法。在这些情况下，HTML5允许某些开始标记在终止>之前具有可选的/。在这些情况下，/是可选的并且被忽略，因此<hr>和<hr />相同。HTML规范将这些称为“无效元素”，并给出有效列表。严格来说，可选的/只在这些void元素的开始标记内有效；例如，<br />并且<hr />是有效的HTML5，但<p />不是。

HTML5规范对HTML作者和Web浏览器开发人员的正确选择进行了明确区分，第二组要求接受所有无效的“旧版”语法。在这种情况下，这意味着符合HTML5的浏览器将接受非法的自关闭标签（例如）<p />，并按您期望的方式呈现它们。但是对于作者而言，该页面不是有效的HTML5。（更重要的是，DOM树您使用这种非法语法的获得可以认真搞砸了;自我封闭的<span />标签，例如，倾向于把事情搞得一团糟了很多）。

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

HTML5的行为基本上就像没有尾部斜杠一样。HTML5语法中没有自动关闭标记之类的东西。

• 自动关闭的标签非空的元素，如<p/>，<div/>不会在所有的工作。尾部的斜杠将被忽略，这些将被视为开始标记。这很可能导致嵌套问题。

  不管斜杠前面是否有空格，这都是正确的：出于相同的原因<p />，它<div />也不起作用。

• 在void元素上的自闭合标签类似于<br/>或<img src="" alt=""/> 将起作用，但这仅是因为尾部的斜杠被忽略了，在这种情况下碰巧会导致正确的行为。

结果是，在旧的“ XHTML 1.0用作text / html”中工作的所有内容都将像以前一样继续工作：非空标记的尾部斜杠在此处也不被接受，而void元素的尾部斜杠也可以工作。

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

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

<br>而且<br />都很好。

如本例所示，我将非常注意使用自动关闭标签：

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

我的直觉会一直<span></span><span></span>代替

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

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