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

W3Cvalidation器不喜欢非空元素上的自闭标记（以“ /> ”结尾）。 （空元素是那些可能永远不会包含任何内容的元素。）它们在HTML5中仍然有效吗？

一些被接受的无效元素的例子：

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

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

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

注意： W3Cvalidation器实际上接受无效自闭标签：作者最初有一个问题，因为一个简单的错字 （而不是/> ）。 但是，自我closures标签在HTML5中通常不是100％有效，而且这些答案详细讨论了各种HTML风格的自我closures标签的问题。

Answer 1

• 在HTML 4中 ， <foo / （yes，no > ）意味着<foo> （这会导致<br />含义<br>> （即<br>&gt; ）和<title/hello/含义<title>hello</title> ）。 浏览器在支持这方面做得很差，规范build议作者避免使用这种语法 。

• 在XHTML中 ， <foo />意味着<foo></foo> ，但是由于这只能在XMLparsing模式下工作，并且大多数文档都以text / html的forms提供，所以遵循兼容性原则 。

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

  • 在被指定为空元素的 HTML元素（本质上是“HTML 5之前存在且被禁止有任何内容的元素”）时，简单地禁止结束标记。 开始标签末尾的斜线是允许的，但没有意义。 对于那些沉迷于XML的人来说，这只是语法糖（和语法荧光笔）。
  • 在其他HTML元素上，斜线是一个错误，但错误恢复将导致浏览器忽略它，并将标记视为常规的开始标记。 这通常会导致结尾标签丢失，导致后续元素成为孩子而不是兄弟姐妹。
  • 外部元素（从XML应用程序（如SVG导入））将其视为自闭句法。

Answer 2

正如Nikita Skvortsov所指出的那样，一个自闭的div将不会被validation。 这是因为div是一个正常的元素 ，而不是一个无效的元素 。 根据HTML5规范 ，不能有任何内容的标签（被称为空元素 ）可以是自闭的*。 这包括以下标签：

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

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

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

Answer 3

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

更可能的是，您的页面被作为text/html ，它遵循更宽松的HTML语法。 在这些情况下，HTML5允许某些开始标记在结束之前有一个可选的/。 在这些情况下，/是可选的并被忽略，所以<hr>和<hr />是相同的。 HTML规范调用了这些“void元素”，并给出了一个有效的列表。 严格来说，可选项/只在这些void元素的开始标记中有效; 例如， <br />和<hr />是有效的HTML5，但<p />不是。

HTML5规范明确区分了HTML作者和networking浏览器开发者的正确之处，第二个要求接受各种无效的“传统”语法。 在这种情况下，这意味着符合HTML5的浏览器将接受非法的自封闭标签，如<p /> ，并按照您的预期呈现它们。 但是对于作者来说，该页面将不是有效的HTML5。 （更重要的是，使用这种非法语法所得到的DOM树可能会被严重搞砸;例如，自封闭的<span />标签往往会让事情变得非常糟糕 ）。

（在您的服务器知道如何将XHTML文件作为XML MIMEtypes发送的exception情况下，页面需要符合XHTML DTD和XML语法，这意味着自定义标签对于这些定义的元素是必需的。

Answer 4

基本上，HTML5的行为就像后面的斜杠不在那里一样。 HTML5语法中不存在自闭标签。

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

  无论斜线前面是否有空格，情况都是如此： <p />和<div />也不会出于同样的原因。

• 像void或者<img src="" alt=""/>这样的void元素上的自动closures标签将会起作用，但仅仅是因为尾部的斜杠被忽略，并且在这种情况下会导致正确的行为。

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

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

Answer 5

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

<br>和<br />都很好。

Answer 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>