In HTML5, should null elements be closed with ">" or "/>"?

Asked

Viewed 1,662 times

17

In HTML 5, there is a series of null elements, which according to the specification (English) and examples given (English) by W3C, they are closed using only >:

Elementos Nulos

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

According to many articles on the internet such as this on MDN (English) or this on C#corner (English), they indicate (or illustrate) that the elements shall be closed with />.

Question

In HTML5, document type <!DOCTYPE html>, the elements shall be closed in what way?

<meta charset=utf-8>

or

<meta charset=utf-8 />
html5 tags syntax

  • Related (English): http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5

  • @Sergio had already read, but this question and its answers is a big mess... initially the question had an error in the code instead of /> was \>, reason why the W3C validator indicates that there were errors... then the question was edited and generated a huge confusion in the answers... Just see the issue history of the question that should break some highscores :D (but thanks for the Feedback).

2 answers

11


There is no need to include the slider at the end of the widget, although this is permitted in the case of null items, for the joy of XML fanatics:

[About opening tags syntax]

6. Then, if the element is one of the void Elements, or if the element is a Foreign element, then there may be a single "/" (U+002F) Character. This Character has no Effect on void Elements, but on Foreign Elements it Marks the start tag as self-closing.

Free translation:

If the element is one of the null elements, or if it is a foreign element, then a single character "/" (U+002F) can be included. This character has no effect on null elements, but on foreign elements marks the opening tag as auto-closed.

So in HTML5 both options below are valid* for the tag meta:

<meta charset=utf-8>
<meta charset=utf-8 />

(I personally find the first option preferable, because it is cleaner.)

The text of the specification that you quoted says:

Void Elements only have a start tag; end tags must not be specified for void Elements

That is to say:

Null elements have only one opening tag; closing tags should not be used on null elements.

This means a closing tag </meta> is invalid, not that <meta /> is invalid.

In XML, or XHTML, when you write something like <img />, that amounts to <img></img>. The slash at the end is just a shortcut to indicate to parser that the tag is being closed, with no content, since in XML all tags must be closed. HTML5 is not XML, and does not work in the same way.

* W3C validator says HTML5 support is experimental, but I believe for this case the result is reliable

  • Is there any official HTML5 "validator" that checks a source code? I think you could put in your answer, to complement :)

  • 1

    @Calebeoliveira There is the super official W3C Markup Validation Service but the HTML5 component is still in the experimental stage!

3

I will add a few points that I consider important on the subject.

Non-null elements CANNOT be closed with />

This article is very enlightening on the subject. For example, if you send to W3C validator something like <a id="selfclosinganchor" />, will receive the following validation error:

Self-closing syntax (/>) used on a non-void HTML element. Ignoring the Slash and treating as a start tag.

Which means:

Auto-lock syntax (/>) used in a non-null HTML element. Ignoring the bar and treating it as an opening element.

And since there will be no closure element, more errors may occur in HTML.

There are advantages to using auto-closure on null tags

  • Compatibility with older HTML interpreters and browsers
  • Compatibility with XML interpreters
  • One can avoid problems in some interpreters, especially the "homemade" who do not always take into account the specification

Non-null and unopened tags can cause problems

Although some HTML interpreters are "smart" to the point of ignoring unopened tags (some people do this to avoid typing or to save a few bytes), this may well lead to mistakes and impact on performance page rendering.

I couldn’t find the source of a text I read a few years ago on how parser Internet Explorer faced unopened tags, but basically it stacked open tags until it finished reading the entire document and then applied an adjustment algorithm. This means that when there are unopened tags the render time would be the worst possible as it would not show the content until read the </html> and apply such an algorithm, which caused a delay visible.

  • 3

    Non-null elements CANNOT be closed with /> - except for the foreigners

Browser other questions tagged html5 tags syntax

You are not signed in. Login or sign up in order to post.