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


670

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.


2
@ Ben: oh, desculpe, acho que você está certo. Nesse caso, eu não entendi a pergunta original, achei que o OP quer saber se as tags de fechamento automático são válidas no HTML5. Mas isso significa que ele acabou de digitar seu código ou não sabia como escrever tags de fechamento automático, o que faz sentido que o validador do W3C tenha marcado seu código como inválido.
Sk8erPeter

16
Para economizar tempo para futuros leitores: sim, a sintaxe da pergunta está incorreta e não, você não deve alterá-la. O PO explicou explícita e justificadamente o porquê . Como originou os erros de validação que levaram a essa pergunta, a sintaxe não deve ser corrigida.
Jordan Gray.

2
Vocês ainda estão lutando em qual direção as barras devem estar voltadas? Vamos.
BoltClock

3
@BoltClock Sim, ainda lutando. Gente: se essa pergunta foi feita \>, ela deve ser encerrada como uma pergunta inútil, consertar meu erro de digitação. As respostas todos os endereços />. A />versão é a única útil. Deixe ser.
Gilles 'SO- stop be evil'

1
Em seguida, a pergunta deve ser reformulada, porque o validador W3C realmente aceita tags de fechamento automático. É difícil reformular a pergunta dessa maneira sem comprometer sua integridade com relação à intenção original. Portanto, se queremos aderir às regras do SO, podemos ter que sacrificar a clareza em questões como essa, mesmo que pareça que editar a questão seja a única coisa sensata a se fazer, em prol do bem maior em média. Poderíamos iniciar outra discussão sobre a meta, se houver muitas outras questões com um problema semelhante.
Osa

Respostas:


1238
  • 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.

24
" ... que são viciados em XML. ". Você parece sugerir que a conformidade com XML é ruim. No entanto, o resultado final no HTML5 parece ser que ainda precisamos lidar com colchetes angulares de qualquer maneira (ou seja, algo com a maioria dos inconvenientes do XML), enquanto torna mais difícil o uso de ferramentas baseadas em XML (por exemplo, ferramentas de modelo ou vários processadores) ) Mesmo de um ponto de geração de vista, parece que <object data="..." />e <img src="..."></src>não OK são, ao mesmo tempo <object data="..."></object>e <img src="..." />são, o que torna mais difícil para a consistência ferramenta. Parece uma situação de perda ou perda.
Bruno

7
@Bruno - HTML é anterior a XML. Os esforços para levar as pessoas a mudarem para o XHTML falharam. Com text/html, os navegadores não dão nenhum significado especial à barra, portanto, a inclusão não serve para nenhum propósito prático. Ele existe apenas para torná-lo mais parecido com XML para pessoas que não conseguem abandonar o hábito.
Quentin

6
@ Quentin Eu não discordo inteiramente. Só acho uma pena que um equivalente XML válido não seja necessariamente HTML5 válido (por exemplo, em <img ...></img>vez de <img ...>ou <img ... />). Como o HTML5 é efetivamente menos rigoroso em geral (possivelmente por que o XHTML falhou), ele poderia muito bem ter tolerado algo assim <img ...></img>. Infelizmente, não é, portanto, um gerador de modelo baseado em XML precisa saber como distinguir a produção de elementos nulos ou de fechamento automático: você não pode ter uma regra para escrever todos os elementos vazios <tag></tag>.
Bruno

3
O XHTML falhou antes do HTML 5 estar no horizonte, e você não pode ter elementos longos e vazios no formulário porque a correção de erros do navegador que antecedeu o XHTML faria coisas como tratar, </br>pois <br>isso <br></br>seria uma quebra de linha dupla. (e a compatibilidade com a marcação incorreta no mundo real (como </br>) é um dos objetivos de design do HTML 5).
Quentin

1
FROM W3C: Elementos nulos: área, base, br, col, incorporação, hora, img, entrada, keygen, link, meta, param, fonte, faixa, wbr "Os elementos nulos têm apenas uma tag de início; as tags finais não devem ser especificadas para elementos nulos ". w3.org/TR/html5/syntax.html#void-elements
Fabio Nolasco

406

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.


1
As Ferramentas para desenvolvedor do IE10 estão fornecendo "HTML1500: a tag não pode ser fechada automaticamente. Use uma tag de fechamento explícita". na linha <meta charset = "UTF-8" /> Alguma idéia de por que isso seria?
James em Indy

Ok, descobri que as tags de fechamento automático não devem ter a barra (e removê-la corrige meu erro). Citar: tiffanybbrown.com/2011/03/23/…
James in Indy

A especificação mudou. Agora, os elementos "nulo" ou "de fechamento automático" não devem incluir a barra, quando veiculados como doctype HTML 5. No entanto, se estiver sendo veiculado como XHTML, a barra de fechamento pode ser necessária (verifique os documentos nesse caso). Em uso prático, as páginas geralmente serão exibidas conforme o esperado, mesmo que o fechamento /tenha sido incluído, mas isso não é garantido (depende do navegador reescrever efetivamente o código para você e interpretá-lo como pretendido.) Além disso, se por algum motivo, é necessário que sua página seja aprovada na validação do HTML 5, talvez ela não seja aprovada se você fechar as tags de elementos nulos.
precisa saber é o seguinte

Em relação ao comentário de @ SherylHohman, não acredito que a especificação tenha mudado (ou, se houver, mudou de volta). Consulte w3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) - elementos nulos (ou estrangeiros) ainda podem incluir a barra.
ChrisC 25/02/19

63

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.)


31
<p /> será tratado como uma marca de abertura, não uma marca de fechamento automático. Isso significa que todo o restante do documento será tratado como estando dentro do elemento P. Não é isso que eu "provavelmente espero" e produzirá uma confusão séria em qualquer página não trivial.
mhsmith

12

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.


5

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.


12
De acordo com a especificação do HTML5, a sintaxe de fechamento automático ( />) não pode ser usada em um elemento HTML não nulo.
NaXa

3
A pergunta era sobre tags de fechamento automático em elementos não nulos , como <p/>ou <div/>.
precisa

2
Inicialmente, a questão não era especificamente sobre elementos não nulos. Era mais como, você ainda pode usar <... />como em XHTML ou precisa remover o/ em HTML5. A questão foi alterada várias vezes depois.
Nick

De qualquer forma, a resposta é que a barra será ignorada, o que quebrará elementos não declarados como nulos, mas será compatível com os elementos nulos.
thomasrutter

4

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


2
Isso está descrito na resposta aceita:On other [than void] 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.
Palec

-1

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"/>

1
Isso porque o svg é escrito em xml, não em html. Ele usa diferentes regras de análise
Electric Coffee
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.