Does HTML5 allow non-empty self-closing tags?

Question

The W3C validator (Wikipedia) does not like the use of self-closing tags (tags ending in "/>") on non-empty elements. (Empty elements are those that never contain any content.) Are they still valid in HTML5?

Some examples of accepted empty elements:

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

Some examples of rejected non-empty elements:

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

Note:

The W3C validator actually accepts empty self-closing tags: the author initially encountered the problem because of a simple typo (using > instead of /> ;); However, self-closing tags are not fully valid in HTML5, and the answer elaborates on the issue of self-closing tags in different HTML versions.

Answer 1

Self-closing divs will not be validated. This is because div is a normal element, not an empty element.

According to the HTML5 specification, tags that cannot contain any content (called empty elements) can be self-closing*. This includes the following tags:

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

The "/" on the above tag is completely optional, so <img/> is no different from <img>, but <img&gt ;</img> is invalid.

*Note: External elements can also be self-closing, but I think that's outside the scope of this answer.

Answer 2

• Theoretically, in HTML 4, <foo / (yes, without any >) means <foo> (which results in <br /> meaning <br>> (i.e. <br>>) and <title/hello/ means <title>hello</title>). I use the term "theoretically" because this is a SGML rule that browsers support very poorly. Support is so sparse (I've only seen it work in emacs-w3m) that the specification advises authors to avoid using this syntax .

• In XHTML, <foo /> means <foo></foo>. This is the XML rule that applies to all XML documents. That said, XHTML is typically served as text/html, which (at least historically) is used by browsers using a different parser than documents served as application/xhtml xml deal with. The W3C provides compatibility guidelines for XHTML as text/html. (Basically: use self-closing tag syntax only if the element is defined as EMPTY (and closing tags are prohibited in the HTML specification)).

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

  For elements that are designated as
  • empty (basically "elements that existed before HTML5 and were prohibited from containing any content"), closing tags are prohibited. A slash at the end of the opening tag is allowed but has no meaning. This is just syntactic sugar for people who are used to XML (and syntax highlighters).
  As with other HTML elements, the slash is
  • an error , but error recovery will cause the browser to ignore it and treat the tag as a regular opening tag. This often results in missing closing tags, making subsequent elements child elements rather than siblings.
  External elements (imported from XML applications such as SVG) are treated as self-closing syntax.