(非无效)自闭标签在HTML5中有效吗?

The W3C validator doesn't like self-closing tags (those that end with "/>") on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5?

W3C验证器不喜欢在非空元素上使用自闭标签(以“/>”结尾的标签)。(Void元素是那些可能不包含任何内容的元素。)在HTML5中仍然有效吗?

Some examples of accepted void elements:

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

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

Some examples of rejected non-void elements:

被拒绝的非无效元素的一些例子:

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

Note: the W3C validator actually accepts void self-closing tags: the author originally had a problem because of a simple typo (\> instead of />). However, self-closing tags are not 100% valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.

注意:W3C验证器实际上接受void自闭标记:作者最初遇到问题是因为一个简单的错误(\>而不是/>)。但是，自闭标签在HTML5中一般不是100%有效的，并且答案详细说明了各种HTML风格的自闭标签的问题。

6 个解决方案

#1

1137

In HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to   meaning  > (i.e.  >) and <title/hello/ meaning <title>hello</title>). Browsers did a very poor job of supporting this and the spec advises authors to avoid the syntax.

在HTML 4中， )表示 (导致
表示
>(即
>)， hello )。浏览器在支持这方面做得很差，规范建议作者避免语法。
In XHTML, <foo /> means <foo></foo>. This is an XML rule that applies to all XML documents. That said, XHTML is often served as text/html which (historically at least) gets processed by browsers using a different parser than documents served as application/xhtml+xml. The W3C provides compatibility guidelines to follow for XHTML as text/html. (Essentially: Only use self-closing tag syntax when the element is defined as EMPTY (and the end tag was forbidden in the HTML spec)).

在XHTML中，表示。这是一个适用于所有XML文档的XML规则。也就是说，XHTML通常作为文本/html(至少在历史上是这样)被浏览器使用不同的解析器处理，而不是作为应用程序/ XHTML +xml的文档。W3C为XHTML作为文本/html提供了兼容性指南。(本质上:当元素定义为空时，只使用自闭标记语法(在HTML规范中禁止结束标记))。
In HTML5, the meaning of <foo /> depends on the type of element.

在HTML5中，的含义取决于元素的类型。
- On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any content"), end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning. It is just syntactic sugar for people (and syntax highlighters) that are addicted to XML.
- 对于被指定为void元素的HTML元素(本质上是“一个存在于HTML5之前并且禁止包含任何内容的元素”)，结束标记是被禁止的。开始标记末尾的斜杠是允许的，但没有任何意义。对沉迷于XML的人(以及语法高亮者)来说，这只是语法上的糖。
- On other 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.
- 在其他HTML元素中，斜杠是一个错误，但是错误恢复将导致浏览器忽略它，并将标记视为常规的开始标记。这通常会导致缺少结束标记，导致后续元素是子元素而不是兄弟元素。
- Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.
- 外部元素(从XML应用程序(如SVG)导入)将其视为自闭语法。

#2

369

As Nikita Skvortsov pointed out, a self-closing div will not validate. This is because a div is a normal element, not a void element. According to the HTML5 spec, tags that cannot have any contents (known as void elements) can be self-closing*. This includes the following tags:

正如Nikita Skvortsov指出的那样，自闭div不会生效。这是因为div是普通元素，而不是void元素。根据HTML5规范，不能包含任何内容(称为void元素)的标记可以自闭*。这包括以下标签:

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

The "/" is completely optional on the above tags, however, so <img/> is not different from <img>, but <img></img> is invalid.

以上标签上的“/”是完全可选的，但是 (非无效)自闭标签在HTML5中有效吗? 与没有区别，无效。

*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.

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

#3

In practice, using self-closing tags in HTML should work just like you'd expect. But if you are concerned about writing valid HTML5, you should understand how the use of such tags behaves within the two different two syntax forms you can use. HTML5 defines both an HTML syntax and an XHTML syntax, which are similar but not identical. Which one is used depends on the media type sent by the web server.

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

More than likely, your pages are being served as text/html, which follows the more lenient HTML syntax. In these cases, HTML5 allows certain start tags to have an optional / before it's terminating >. In these cases, the / is optional and ignored, so <hr> and <hr /> are identical. The HTML spec calls these "void elements", and gives a list of valid ones. Strictly speaking, the optional / is only valid within the start tags of these void elements; for example,   and <hr /> are valid HTML5, but  is not.

很有可能，您的页面被用作文本/html，遵循更宽松的html语法。在这些情况下，HTML5允许某些开始标记在终止>之前具有可选/。在这些情况下，/是可选的，被忽略，所以

和

是相同的。HTML规范调用这些“无效元素”，并给出有效元素的列表。严格地说，可选/仅在这些void元素的开始标记中有效;例如，
和

是有效的HTML5，

不是。

The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like , and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed  tags, for example, tend to mess things up a lot).

HTML5规范明确区分了HTML作者和web浏览器开发人员的正确性，而第二组则需要接受各种无效的“遗留”语法。在这种情况下，这意味着html5兼容的浏览器将接受非法的自闭标签，如

，并按您可能的期望呈现它们。但是对于作者来说，这个页面不是有效的HTML5。(更重要的是，使用这种非法语法所得到的DOM树可能会严重出错;例如，自闭标签往往会把事情弄得一团糟)。

(In the unusual case that your server knows how to send XHTML files as an XML MIME type, the page needs to conform to the XHTML DTD and XML syntax. That means self-closing tags are required for those elements defined as such.)

(在不常见的情况下，服务器知道如何将XHTML文件作为XML MIME类型发送，页面需要遵循XHTML DTD和XML语法。这意味着自闭标记对于定义的元素是必需的。

#4

HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.

HTML5基本上表现得就像末尾的斜杠不存在一样。在HTML5语法中没有自闭标签这种东西。

Self-closing tags on non-void elements like , <div/> will not work at all. The trailing slash will be ignored, and these will be treated as opening tags. This is likely to lead to nesting problems.

对于像

，这样的非空元素，自闭标签根本不起作用。尾斜杠将被忽略，这些将被视为打开标签。这可能会导致嵌套问题。

This is true regardless of whether there is whitespace in front of the slash:  and <div /> also won't work for the same reason.

无论在斜杠前面是否有空格，这都是正确的:

和也不会因为相同的原因而工作。
Self-closing tags on void elements like   or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.

对空元素(如
或)的自闭标签将有效，但这只是因为忽略了尾斜杠，在这种情况下，这恰好导致了正确的行为。

The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.

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

One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.

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

#5

Self-closing tags are valid in HTML5, but not required.

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

  and   are both fine.

和
都可以。

#6

I would be very careful with self closing tags as this example demonstrates:

我将非常小心地使用自关闭标签，正如这个例子所演示的:

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

My gut feeling would have been  instead

我的直觉应该是

#1