In HTML5 should nulls be enclosed with "" or with "/"?

17

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

Null Elements

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 in MDN < sup> (English) or this in C # corner (English) , they indicate (or illustrate) that elements should be closed with /> .

Question

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

<meta charset=utf-8>

or

<meta charset=utf-8 />
    
asked by anonymous 05.01.2014 / 20:55

2 answers

11

It is not necessary to include the slash at the end of the element, although this is allowed in the case of null elements , to the joy of fans by XML:

  

[ About syntax for opening tags ]

     

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 it marks the opening tag as self-closing.

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

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

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

The spec text you quoted says:

  

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

That is:

  

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

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

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

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

    
05.01.2014 / 21:27
3

I will add some points that I consider important on the subject.

Non-null elements can NOT be closed with />

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

  

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

What does it mean:

  

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

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

There are advantages to using auto-close in null tags

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

Non-null and non-closed tags can cause problems

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

I could not find the source of a text I read a few years ago about how Internet Explorer's parser looked at unsealed tags, but basically it would stack the open tags until the end of the whole reading document and then applied an adjustment algorithm. This means that when there are unclosed tags the rendering time would be the worst possible because it would not show the content until it read </html> and apply that algorithm, which caused a delay / p>     

06.01.2014 / 11:41