Are (non-void) self-closing tags valid in HTML5?

Viewed 311928

The W3C validator (Wikipedia) 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.
8 Answers

However -just for the record- this is invalid:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

And a slash here would make it valid again:

    <rect width="800" height="400" fill="#000"/>

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.

<p>This is paragraph with &lt;br&gt;<br> and &lt;br/&gt;<br/> and then &lt;br /&gt;<br />.</p>

The above code will look like the following image in the browser.

enter image description here

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.

Related