（非空）自关闭标签在 HTML5 中有效吗？
W3C 验证器 (Wikipedia）在 非 void 元素。 （Void 元素 是那些可能不包含任何内容的元素.) 它们在 HTML5 中仍然有效吗？
接受 void 元素的一些示例：
<br />
<img src="" />
<input type="text" name="username" />
拒绝 非 void 元素的一些示例：
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
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 100% not valid in HTML5 in general, and the answers elaborate on the issue of self-closing tags across various HTML flavors.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
（理论上）在 HTML 4 中， （是的，根本没有
>）意味着< ;foo>（导致
>
> ;
表示 <code><title>hello 在XHTML中，
> text/html，（至少在历史上）浏览器使用与用作application/xhtml+xml的文档不同的解析器来处理它。 W3C 为 XHTML 作为文本提供了要遵循的兼容性指南 /html. （本质上：仅当元素定义为 EMPTY 时才使用自闭合标记语法（并且 HTML 规范中禁止使用结束标记）。在HTML5中，
(Theoretically) in HTML 4,
<foo /(yes, with no>at all) means<foo>(which leads to<br />meaning<br>>(i.e.<br>>) and<title/hello/meaning<title>hello</title>). I use the term "theoretically" because this is an SGML rule that browsers did a very poor job of supporting. There was so little support (I only ever saw it work in emacs-w3m) that the spec advises authors to avoid the syntax.In XHTML,
<foo />means<foo></foo>. This is an XML rule that applies to all XML documents. That said, XHTML is often served astext/htmlwhich (historically at least) gets processed by browsers using a different parser than documents served asapplication/xhtml+xml. The W3C provides compatibility guidelines to follow for XHTML astext/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)).In HTML5, the meaning of
<foo />depends on the type of element:自关闭 div 不会验证。这是因为 div 是一个普通元素，而不是void 元素。
根据 HTML5 规范，标签不能包含任何内容 (称为空元素）可以是自闭合的*。这包括以下标签：
但是，上述标签中的“/”是完全可选的，因此
![]()
![]()
![]()
*注意：外部元素也可以是自动关闭的，但我认为这不在这个答案的范围内。
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:
The "/" is completely optional on the above tags, however, so
<img/>is not different from<img>, but<img></img>is invalid.*Note: foreign elements can also be self-closing, but I don't think that's in scope for this answer.
实际上，在 HTML 中使用自关闭标签应该会像您期望的那样工作。但是，如果您担心编写有效 HTML5，那么您应该了解此类标记在您可以使用的两种不同语法形式中的行为方式。 HTML5 定义了 HTML 语法和 XHTML 语法，它们相似但不完全相同。使用哪一种取决于 Web 服务器发送的媒体类型。
您的页面很可能以
text/html的形式提供，它遵循更宽松的 HTML 语法。在这些情况下，HTML5 允许某些开始标记在终止 > 之前有一个可选的 /。在这些情况下，/ 是可选的并被忽略，因此
不是。HTML5 规范明确区分了 HTML 作者和 Web 浏览器开发人员的正确内容，第二组需要接受各种无效的“旧版”语法。在这种情况下，这意味着兼容 HTML5 的浏览器将接受非法的自闭合标签，例如
，并按照您可能期望的方式呈现它们。但对于作者来说，该页面不是是有效的 HTML5。 （更重要的是，使用这种非法语法得到的 DOM 树可能会被严重搞砸；例如，自闭合标签往往会把事情搞砸很多）。（在特殊情况下，您的服务器知道如何将 XHTML 文件作为 XML MIME 类型发送，页面需要符合 XHTML DTD 和 XML 语法。这意味着这些文件需要自闭标签如此定义的元素。）
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.
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,<br />and<hr />are valid HTML5, but<p />is not.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
<p />, 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<span />tags, for example, tend to mess things up a lot).(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.)
HTML5 的行为基本上就好像尾随斜杠不存在一样。 HTML5 语法中不存在自闭合标签之类的东西。
非 void 元素上的自闭合标签（例如
、
无论斜杠前面是否有空格，都是如此：
和
void 元素上的自闭合标签，例如![]()
< /code> 会工作，但只是因为尾部斜杠被忽略，在这种情况下，这恰好会导致正确的行为。
结果是，在旧的“XHTML 1.0 作为文本/html”中工作的任何内容都将继续像以前一样工作：非 void 标记上的尾部斜杠也不被接受，而 void 元素上的尾部斜杠则有效。
还有一点需要注意：可以将 HTML5 文档表示为 XML，这有时被称为“XHTML 5.0”。在这种情况下，将始终处理 XML 应用规则和自结束标记。它总是需要使用 XML mime 类型来提供服务。
HTML5 basically behaves as if the trailing slash is not there. There is no such thing as a self-closing tag in HTML5 syntax.
Self-closing tags on non-void elements like
<p/>,<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:
<p />and<div />also won't work for the same reason.Self-closing tags on void elements like
<br/>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.
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 中有效，但不是必需的。
Self-closing tags are valid in HTML5, but not required.
<br>and<br />are both fine.我会非常小心地使用自闭合标签，如下例所示：
我的直觉是
I would be very careful with self closing tags as this example demonstrates:
My gut feeling would have been
<span></span><span></span>instead然而 - 只是为了记录 - 这是无效的：
这里的斜杠将使其再次有效：
However -just for the record- this is invalid:
And a slash here would make it valid again:
（非空）自关闭标签在 HTML5 中有效吗？
当然，它们是有效的，但几乎没有修改。
以自闭合标签
即使您编写
在以
/>或/>结尾的自闭合标签中，/（斜线）和空格将被忽略。举个例子，让我们看看它在浏览器中的样子。
上面的代码在浏览器中将如下图所示。
可以看到全部转换为
Are (non-void) self-closing tags valid in HTML5?
Of course, they are valid but with little modification.
Take an example a self-closing tag
<br>.Even if you write
<br/>or<br />they will eventually be converted to<br>in the browser.In self-closing tags ending with
/>or/>,/(slash) and white space will simply be ignored.Take an example and let's see how it looks in the browser.
The above code will look like the following image in the browser.
You can see all converted to
<br>. So it's your choice to close the self-closing tag or not but they are completely valid.