Are (non

 

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?

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.

  • In HTML 4 , <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (ie <br>&gt; ) 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.

  • 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)).

  • In HTML5 , the meaning of <foo /> depends on the type of element.

  • 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.
  • 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.
  • Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.

    • 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: 

    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.

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

    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.)

    链接地址: http://www.djcxy.com/p/13406.html

    上一篇: Python，正则表达式和html：匹配最后一个标签

    下一篇: 是（非