Are non-void self-closing tags valid in HTML5

Question

The W3C validator doesn t like self-closing tags  those that end with    gt    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    lt br   gt   lt img src      gt   lt input type  text  name  username    gt    Some examples of rejected non-void elements    lt div id  myDiv    gt   lt span id  mySpan    gt   lt textarea id  someTextMessage    gt     Note   The W3C validator actually accepts void self-closing tags  the author originally had a problem because of a simple typo    gt  instead of   gt    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

User · Answer

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  lt img  gt  is not different from  lt img gt   but  lt img gt  lt  img gt  is invalid    Note  foreign elements can also be self-closing  but I don t think that s in scope for this answer

User · 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  lt hr gt  and  lt hr   gt  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   lt br   gt  and  lt hr   gt  are valid HTML5  but  lt p   gt  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  lt p   gt   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  lt span   gt  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

User · Answer

In HTML 4   lt foo    yes  with no  gt  at all  means  lt foo gt   which leads to  lt br   gt  meaning  lt br gt  gt   i e   lt br gt  amp gt   and  lt title hello  meaning  lt title gt hello lt  title gt    This is an SGML rule that browsers did a very poor job of supporting  and the spec advises authors to avoid the syntax  In XHTML   lt foo   gt  means  lt foo gt  lt  foo gt   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  lt foo   gt  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

User · Answer

I would be very careful with self closing tags as this example demonstrates   var a     lt span  gt  lt span  gt    var d   document createElement  div    d innerHTML   a console log d innerHTML       lt span gt  lt span gt  lt  span gt  lt  span gt     My gut feeling would have been  lt span gt  lt  span gt  lt span gt  lt  span gt  instead

User · Answer

However -just for the record- this is invalid    lt address class  vcard  gt     lt svg viewBox  0 0 800 400  gt       lt rect width  800  height  400  fill   000  gt     lt  svg gt   lt  address gt    And a slash here would make it valid again        lt rect width  800  height  400  fill   000   gt

User · Answer

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  lt p  gt    lt div  gt  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   lt p   gt  and  lt div   gt  also won t work for the same reason   Self-closing tags on void elements like  lt br  gt  or  lt img src  quot  quot  alt  quot  quot   gt  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  quot XHTML 1 0 served as text html quot  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  quot XHTML 5 0 quot    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

User · Answer

Self-closing tags are valid in HTML5  but not required    lt br gt  and  lt br   gt  are both fine

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

Examples related to html

Examples related to syntax

Examples related to w3c-validation