0 votes
1 view
in Web Technology by (22.4k points)

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.

1 Answer

0 votes
by (40.3k points)

For HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>&gt;) and <title/hello/ meaning <title>hello</title>). According to the SGML rule the browsers do a poor job of supporting, and the spec advises authors to avoid the syntax.

For XHTML, <foo /> means <foo></foo>. This is an XML rule that applies to all XML documents. XHTML is often served as text/html which is getting processed by browsers using a different parser than documents served as application/xhtml+xml. 

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

  • For 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 symbol at the end of the start tag is allowed, but it has no meaning. 
  • For other HTML elements, the slash acts as an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This usually ends 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.
Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...