As tags de fechamento automático (não nulas) são válidas em HTML5?

O validador W3C não gosta de tags de fechamento automático (aquelas que terminam com " />") em elementos não nulos . (Os elementos nulos são aqueles que talvez nunca contenham conteúdo.) Eles ainda são válidos no HTML5?

Alguns exemplos de elementos nulos aceitos :

<br />
<img src="" />
<input type="text" name="username" />

Alguns exemplos de elementos não nulos rejeitados :

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

_{Nota:
o validador W3C realmente aceita tags de fechamento automático nulas: o autor originalmente teve um problema devido a um erro de digitação simples (em \>vez de />); no entanto, as tags de fechamento automático não são 100% válidas no HTML5 em geral, e as respostas são elaboradas sobre o problema de tags de fechamento automático em vários tipos de HTML.}

• No HTML 4 , <foo /(sim, sem nenhum >) significa <foo>(o que leva ao <br />significado <br>>(ie <br>&gt;) e <title/hello/significado <title>hello</title>). Esta é uma regra SGML que os navegadores fizeram um péssimo trabalho de suporte, e a especificação aconselha os autores a evitar a sintaxe .

• Em XHTML , <foo />significa<foo></foo> . Esta é uma regra XML que se aplica a todos os documentos XML. Dito isto, o XHTML geralmente é servido como o text/htmlqual (pelo menos historicamente) é processado pelos navegadores usando um analisador diferente dos documentos servidos como application/xhtml+xml. O W3C fornece diretrizes de compatibilidade a serem seguidas para XHTML como text/html. (Essencialmente: use apenas a sintaxe de tag de fechamento automático quando o elemento estiver definido como VAZIO (e a tag final foi proibida na especificação HTML)).

• No HTML5 , o significado de <foo /> depende do tipo de elemento .

  • Nos elementos HTML designados como elementos nulos (essencialmente "Um elemento que existia antes do HTML5 e que era proibido ter qualquer conteúdo"), as tags finais são simplesmente proibidas. A barra no final da tag inicial é permitida, mas não tem significado. É apenas açúcar sintático para pessoas (e marcadores de sintaxe) que são viciadas em XML.
  • Em outros elementos HTML, a barra é um erro, mas a recuperação de erros fará com que os navegadores a ignorem e tratem a marca como uma marca inicial regular. Isso geralmente acaba com uma tag final ausente, fazendo com que os elementos subsequentes sejam filhos em vez de irmãos.
  • Elementos externos (importados de aplicativos XML como SVG) o tratam como sintaxe de fechamento automático.

Como Nikita Skvortsov apontou, uma div de fechamento automático não será validada. Isso ocorre porque uma div é um elemento normal , não um elemento nulo .

De acordo com a especificação do HTML5 , as tags que não podem ter nenhum conteúdo (conhecido como elementos nulos ) podem ser fechadas automaticamente *. Isso inclui as seguintes tags:

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

O "/" é completamente opcional nas tags acima, no entanto, <img/>não é diferente <img>, mas <img></img>é inválido.

* Nota: elementos estrangeiros também podem ser fechados automaticamente, mas não acho que esteja no escopo desta resposta.

Na prática, o uso de tags de fechamento automático em HTML deve funcionar exatamente como você esperaria. Mas se você estiver preocupado em escrever HTML5 válido , deve entender como o uso dessas tags se comporta nas duas formas diferentes de sintaxe que você pode usar. HTML5 define uma sintaxe HTML e uma sintaxe XHTML, que são semelhantes, mas não idênticas. Qual deles é usado depende do tipo de mídia enviado pelo servidor da web.

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 <hr> and <hr /> 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, <br /> and <hr /> are valid HTML5, but <p /> is not.

A especificação HTML5 faz uma distinção clara entre o que é correto para autores de HTML e desenvolvedores de navegadores da Web, sendo necessário que o segundo grupo aceite todos os tipos de sintaxe "legada" inválida. Nesse caso, significa que navegadores compatíveis com HTML5 aceitarão tags ilegais de fechamento automático, como <p />, e as renderizarão como você provavelmente espera. Mas para um autor, essa página não seria HTML5 válido. (Mais importante, a árvore DOM que você obtém ao usar esse tipo de sintaxe ilegal pode ser seriamente danada; <span />tags fechadas automaticamente, por exemplo, tendem a atrapalhar bastante as coisas ).

(No caso incomum de seu servidor saber enviar arquivos XHTML como um tipo XML MIME, a página precisa estar em conformidade com a sintaxe XHTML DTD e XML. Isso significa que as tags de fechamento automático são necessárias para os elementos definidos como tal.)

O HTML5 basicamente se comporta como se a barra final não estivesse lá. Não existe uma tag de fechamento automático na sintaxe HTML5.

• Tags de fechamento automático em elementos não nulos , como <p/>, <div/>não funcionarão. A barra à direita será ignorada e elas serão tratadas como tags de abertura. É provável que isso leve a problemas de aninhamento.

  Isso é verdade independentemente de haver espaço em branco na frente da barra: <p />e <div />também não funcionará pelo mesmo motivo.

• Etiquetas de fecho automático em vazio elementos como <br/>ou <img src="" alt=""/> vai trabalhar, mas apenas porque a barra final é ignorado, e, neste caso, o que acontece a resultar no comportamento correto.

O resultado é que tudo que funcionou em seu antigo "XHTML 1.0 servido como texto / html" continuará funcionando como antes: barras invertidas em tags não-nulas também não foram aceitas lá, enquanto a barra inativa em elementos nulos funcionou.

Mais uma observação: é possível representar um documento HTML5 como XML, e isso às vezes é chamado de "XHTML 5.0". Nesse caso, as regras de XML se aplicam e as tags de fechamento automático sempre serão tratadas. Sempre precisaria ser veiculado com um tipo mime XML.

As tags de fechamento automático são válidas em HTML5, mas não são necessárias.

<br>e <br />estão bem.

Eu teria muito cuidado com as tags de fechamento automático, como este exemplo demonstra:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

Minha intuição teria sido <span></span><span></span>em vez

No entanto, apenas para o registro, isso é inválido:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

E uma barra aqui tornaria isso válido novamente:

    <rect width="800" height="400" fill="#000"/>