As etiquetas de fecho automático (não-nulo) são válidas no HTML5?
o validador W3C não gosta de etiquetas de fecho automático (aquelas que terminam com "/>") em elementos não-vazios. (Elementos vazios são aqueles que podem nunca conter qualquer conteúdo.) Eles ainda são válidos em HTML5?
alguns exemplos de aceites elementos vazios:
<br />
<img src="" />
<input type="text" name="username" />
alguns exemplos de rejeitados elementos não-vazios:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
Nota:
O validador W3C Aceita de facto as marcas de fecho automático vazias: o autor originalmente teve um problema por causa de um erro de digitação simples (\> em vez de />); no entanto, as tags de auto-fechamento não são 100% válidas no HTML5 em geral, e as respostas elaboram sobre a questão das tags de auto-fechamento em vários sabores HTML.
7 answers
Em HTML 4,
<foo /(sim, sem>: - todos os meios<foo>(o que leva a<br />significado<br>>(i.e.<br>>) e<title/hello/significado<title>hello</title>). Esta é uma regra SGML que os navegadores fizeram um trabalho muito pobre de apoio, e a especificação aconselha os autores a evitarem a sintaxe .Em XHTML,
<foo />meios<foo></foo>. Esta é uma regra XML que se aplica a todos os documentos XML. Dito isto, XHTML é muitas vezes servido comotext/htmlque (pelo menos historicamente) é processado por navegadores utilizando um analisador diferente do que os documentos servidos comoapplication/xhtml+xml. O W3C fornece orientações de compatibilidade a seguir para o XHTML comotext/html. (Essencialmente: use apenas a sintaxe de tag self-closing quando o elemento é definido como vazio (e a tag final foi proibida na spec HTML).-
Em HTML5, o significado de
<foo />depende do tipo de elemento.- sobre elementos HTML que são designados como elementos vazios (essencialmente "um elemento que existia antes do HTML5 e que era proibido ter qualquer conteúdo"), as etiquetas finais são simplesmente proibidas. A barra no final da tag inicial é permitida, mas não tem significado. É apenas açúcar sintático para as pessoas (e marcadores de sintaxe) que são viciados em XML.
- em outros elementos HTML, a barra é um erro, mas a recuperação de erro fará com que os navegadores a ignorem e tratem a marca como uma marca de início regular. Serao normalmente acaba com uma etiqueta final faltando fazendo com que elementos subsequentes sejam crianças em vez de irmãos.
- elementos estranhos (importados de aplicações XML como o SVG) tratam-no como sintaxe de fecho automático.
De acordo com O HTML5 spec, etiquetas que não podem ter qualquer conteúdo (conhecido como elementos vazios) podem ser auto-fechamento*. Isto inclui as seguintes marcas:
area, base, br, col, embed, hr, img, input,
keygen, link, meta, param, source, track, wbr
O " / " é completamente opcional nas marcas acima, por isso <img/> não é diferente de <img>, mas <img></img> é invalido.
* Nota: elementos estranhos também podem ser auto-fechamento, Mas eu não acho que isso está em escopo para esta resposta.
<hr> e <hr /> são idênticos. O HTML spec chama estes "elementos vazios", e dá uma lista de outros válidos. Estritamente falando, o / opcional só é válido dentro das marcas iniciais destes elementos vazios; por exemplo, <br /> e <hr /> são válidos HTML5, mas <p /> não é.
O espectrómetro de HTML5 deixa claro distinção entre o que é correto para autores HTML e para desenvolvedores de navegador web, com o segundo grupo sendo obrigado a aceitar todos os tipos de sintaxe inválida "legado". Neste caso, isso significa que Navegadores compatíveis com HTML5 irão aceitar tags auto-fechados ilegais, como <p />, e rendê-los como você provavelmente espera. Mas para um autor, essa página não seria válida para o HTML5. (Mais importante, a árvore DOM que você obtém usando este tipo de sintaxe ilegal pode ser seriamente lixada; etiquetas self-closed <span />, por exemplo, tendem a estragar as coisas muito ).
(no caso invulgar de o seu servidor saber como enviar ficheiros XHTML como um tipo MIME XML, a página precisa de estar em conformidade com a sintaxe DTD e XML do XHTML. Isso significa que as etiquetas de fecho automático são necessárias para os elementos definidos como tal.)
-
Etiquetas de fecho automático emelementos não vazios como
<p/>,<div/>não vai funcionar. A barra final será ignorada, e estas serão tratadas como marcas de abertura. É provável que isto conduza a problemas de nidificação.Isto é verdade independentemente de haver espaço em branco na frente da barra:
<p />e<div />também não vai funcionar pela mesma razão. -
Etiquetas de fecho automático em vazio elementos como
<br/>ou<img src="" alt=""/>O will funciona, mas só porque a barra final é ignorada, e neste caso isso resulta no comportamento correcto.
O resultado é que tudo o que funcionou no seu antigo "XHTML 1.0 served as text/html" continuará a funcionar como antes: cortes finais em etiquetas não-vazias também não foram aceites lá, enquanto que a barra final no void os elementos funcionavam.
mais uma nota: é possível representar um documento HTML5 como XML, e este é algumas vezes apelidado de "XHTML 5.0". Neste caso, as regras de Aplicação XML e de self-closing tags serão sempre tratadas. Ele sempre precisaria ser servido com um tipo MIME XML.
As etiquetas de fecho automático são válidas no HTML5, mas não são necessárias.
<br> e os dois estão bem.
Eu teria muito cuidado com as etiquetas de fecho 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>"
A minha intuição teria sido <span></span><span></span> em vez disso
No entanto-só para que conste - isto é inválido:
<address class="vcard">
<svg viewBox="0 0 800 400">
<rect width="800" height="400" fill="#000">
</svg>
</address>
<rect width="800" height="400" fill="#000"/>