Are (Non-Void) Self-Closing Tags Valid in Html5

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

  • (Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) and <title/hello/ meaning <title>hello</title>). I use the term "theoretically" because this is an SGML rule that browsers did a very poor job of supporting. There was so little support (I only ever saw it work in emacs-w3m) that 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.

What tags in HTML5 are acknowledged of being self-closing?

Seems like your list is complete according to W3C list (but as Quentin point out, HTML5 draft is still subject to change)

Besides, according to various sources the following obsolete or non-standard tags are void:

basefont, bgsound, frame, isindex

Is a self-closing li tag valid?

No, it isn't. You can test this with a validator.

The / is an error so browsers will ignore it, treating it as a start tag.

The <p> elements are therefore children of the <li> elements (which they have to be since they aren't allowed to be children of <ul> elements).

The next <li> (or </ul>) implicitly ends the previous <li> because the end tag is optional for that element.

Self-closing tags (void elements) in HTML5

There is no consensus on best practice, and according to the author of the spec, Ian Hickson, it does not matter.

Is it valid HTML5 to use a single tag for a div?

This is not valid HTML 5 (HTML does not allow shorttags, the equivalent HTML construct is a single opening div tag). It is valid XHTML 5, as it is valid XML.

The reason why you might see this pass through a validator just fine is because of what you stated:

PS: I'm serving page as application/xhtml+xml

Which means that you tell the validator that it must treat your markup as XML. In other words your page is not HTML 5 at all.

Why some HTML5 tags must have a starting and ending tag instead of self closing them with /?

From the w3c:

A Self-closing tag is a special form of start tag with a slash
immediately before the closing right angle bracket. These indicate
that the element is to be closed immediately, and has no content.
Where this syntax is permitted and used, the end tag must be omitted.
In HTML, the use of this syntax is restricted to void elements and
foreign elements. If it is used for other elements, it is treated as a
start tag. In XHTML, it is possible for any element to use this
syntax. But note that it is only conforming for elements with content
models that permit them to be empty.

The examples you listed would generally contain content, JavaScript, or other elements, so having a proper start and end tag would delimit the scope of those elements/tags.



Related Topics



Leave a reply



Submit