Quais são todos os elementos válidos de fechamento automático em XHTML (conforme implementado pelos principais navegadores)?

188

Quais são todos os elementos válidos de fechamento automático (por exemplo, <br/>) em XHTML (conforme implementado pelos principais navegadores)?

Sei que o XHTML tecnicamente permite que qualquer elemento seja fechado automaticamente, mas estou procurando uma lista desses elementos suportados pelos principais navegadores. Veja http://dusan.fora.si/blog/self-closing-tags para exemplos de alguns problemas causados ​​por elementos de fechamento automático, como <div />.

Kamens
fonte
7
Esse padrão não é o objetivo de XHTML? Eu pensei que uma das vantagens do XHTML era que você poderia usar um gerador de XML para gerar HTML. Por que qualquer gerador XML estaria ciente de quais tags podem ser fechadas automaticamente? Muito estranho.
Elijah
6
A razão pela qual a resposta "manca" e "incorreta" foi aceita é porque ela respondeu à pergunta que os Kamen estavam obviamente fazendo. Ele queria saber quais elementos poderiam ser fechados automaticamente ao veicular XHTML como texto / html sem causar problemas de renderização nos navegadores. Muitas páginas são escritas em XHTML e serviram como texto / html, mesmo que tecnicamente incorretas. A pergunta pode ser melhorada com esse esclarecimento, mas responder a uma pergunta diferente (o que acontece quando você serve como application / xml ou se as tags singulares em text / html devem ter um fechamento /) não é útil nesse caso.
Nick Lockwood

Respostas:

180

Todo navegador que suporta XHTML (Firefox, Opera, Safari, IE9 ) suporta sintaxe de fechamento automático em todos os elementos .

<div/>, <script/>, <br></br>Tudo deve funcionar muito bem. Caso contrário, você terá HTML com o XHTML DOCTYPE adicionado incorretamente.

O DOCTYPE não altera a maneira como o documento é interpretado. Somente o tipo MIME faz .

Decisão do W3C sobre ignorar o DOCTYPE :

O GT HTML discutiu esse problema: a intenção era permitir que navegadores antigos (somente HTML) aceitassem documentos XHTML 1.0 seguindo as diretrizes e servindo-os como text / html. Portanto, documentos servidos como texto / html devem ser tratados como HTML e não como XHTML.

É uma armadilha muito comum, porque o W3C Validator ignora amplamente essa regra, mas os navegadores a seguem religiosamente. Leia Noções básicas sobre HTML, XML e XHTML no blog do WebKit:

De fato, a grande maioria dos documentos supostamente XHTML na Internet é servida como text/html. O que significa que eles não são XHTML, mas, na verdade, HTML inválido que está se saindo no tratamento de erros dos analisadores de HTML. Todos aqueles "XHTML 1.0 válido!" os links na web estão realmente dizendo "HTML inválido 4.01!".


Para testar se você possui XHTML real ou HTML inválido com o DOCTYPE de XHTML, coloque isso no seu documento:

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

Ele valida e, em XHTML real, funciona perfeitamente (veja: 1 vs 2 ). Se você não consegue acreditar (ou não sabe como definir tipos MIME), abra sua página via proxy XHTML .

Outra maneira de verificar é visualizar a fonte no Firefox. Ele destacará barras em vermelho quando forem inválidas.

No HTML5 / XHTML5, isso não mudou, e a distinção é ainda mais clara, porque você nem tem mais DOCTYPE. Content-Typeé o rei.


Para o registro, a especificação XHTML permite que qualquer elemento seja fechado automaticamente, transformando o XHTML em um aplicativo XML :

As tags de elemento vazio podem ser usadas para qualquer elemento que não tenha conteúdo , seja ele declarado ou não usando a palavra-chave EMPTY.

Também é mostrado explicitamente na especificação XHTML :

Elementos vazios devem quer ter uma tag final ou a tag de início deve terminar com />. Por exemplo, <br/>ou<hr></hr>

Kornel
fonte
7
Afaik incorreto, porque o uso de versões de fechamento automático <script>ou <div>resulta em renderização / interpretação diferente.
ZeissS
13
@ZeissS apenas em text/html. Em XHTML real, enviado como application/xhtml+xmlfunciona muito bem. Por favor, leia o artigo ao qual eu vinculei (ou apêndice C da especificação XHTML) antes da votação.
Kornel
3
@pornel, você pode garantir que as tags <script /> de fechamento automático funcionem em navegadores mais antigos? Acho que não. Você parece autoritário, e a maioria de suas informações é precisa, mas a experiência me diz que as tags de script de fechamento automático serão problemáticas e é melhor evitá-las completamente, em vez de sentir dor de cabeça.
Metagrapher 25/03
6
@ Metagrapher se navegadores mais antigos não suportam XHTML real, ou se você não definir o tipo MIME , ele não funcionará. No entanto, em navegadores que suportam XHTML (todos os principais neste momento) com o application/xhtml+xmltipo MIME , posso garantir que <script/>funcionará. Com o tipo MIME. Somente.
Kornel
4
@capdragon: navegadores mais antigos não suportam XHTML (servido como 'application / xhtml + xml'). Se você enviar a eles um documento XHTML como 'text / html', o XHTML será renderizado como uma sopa de tags (ou seja, o navegador o analisa como HTML e considera erros de tags de fechamento automático, dos quais é recuperado normalmente). Suas opções são 1. escrever HTML 4 (não é exatamente uma opção se estiver usando o ASP.NET que renderiza XHTML), 2. servir seu XHTML como 'application / xhtml + xml' (requer IE9 +, e esse tipo MIME interrompe scripts em todos os navegadores de qualquer maneira, então def não é uma opção), 3. write HTML 5, o que basicamente torna tag sopa o padrão :)
Triynko
41

Um elemento para ter muito cuidado com esse tópico é o <scriptelemento>. Se você tiver um arquivo de origem externo, ele causará problemas quando você o fechar automaticamente. Tente:

<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />

Isso funcionará no Firefox, mas interrompe o IE6 pelo menos. Eu sei, porque eu me deparei com isso quando zelosamente fechava todos os elementos que eu via ;-)

Erik van Brakel
fonte
Afeta todas as versões do MSIE: webbugtrack.blogspot.com/2007/08/…
scunliffe 1/08/08
4
<script> não se auto-fechar no Firefox 3.
hsivonen
Bem, costumava funcionar no Firefox quando o encontrei. Parece que não funciona mais em nenhum navegador. Também poderia funcionar apenas no modo peculiares?
Erik van Brakel
1
@erickson funciona bem no Firefox se você acertar o seu tipo MIME.
Kornel
O WebKit continua fazendo isso por motivos de compatibilidade.
Yuhong Bao 31/05
35

A sintaxe de fechamento automático funciona em todos os elementos em application / xhtml + xml. Ele não é suportado em nenhum elemento em text / html, mas os elementos que estão "vazios" em HTML4 ou "nulos" em HTML5 não recebem uma tag final, portanto, se você colocar uma barra neles, parece que a sintaxe de fechamento automático era suportada.

hsivonen
fonte
33

No site de referência das Escolas W3 :

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />
ConroyP
fonte
7
w3schools.com/tags/default.asp Eu vejo 12 tags terminando com />:"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"
mpen 23/10/10
94
Observe que o W3schools não é afiliado ao W3C e ainda não responde às correções enviadas pelos membros do W3C.
Kornel
2
Como tantas vezes, a w3schools está quase certa. Uma maneira precisa para encontrar os elementos vazios é correr grep EMPTY xhtml1-strict.dtd | sortougrep EMPTY xhtml1-transitional.dtd | sort
cayhorstmann
1
IMHO, as pessoas batem W3Schools muito difícil. Ele provou ser um ótimo recurso para quando você ESTÁ INICIANDO (!) Em um tópico sobre o qual você não sabe nada.
Priidu Neemre
28

Melhor pergunta seria: quais tags podem ser fechadas automaticamente, mesmo no modo HTML sem afetar o código? Resposta: somente aqueles que têm conteúdo vazio (são nulos). De acordo com as especificações HTML, os seguintes elementos são nulos:

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

Versão mais antiga da especificação também listada command. Além disso, de acordo com várias fontes, as seguintes tags obsoletas ou fora do padrão são nulas:

basefont, bgsound, frame, isindex

Dmitry Osinovskiy
fonte
10

Espero que isso ajude alguém:

<base />
<basefont />
<frame />
<link />
<meta />

<area />
<br />
<col />
<hr />
<img />
<input />
<param />
Jeff
fonte
5

Que tal <meta>e <link>? Por que eles não estão nessa lista?

Como regra geral, não feche automaticamente nenhum elemento que se destina a ter conteúdo, pois definitivamente causará problemas no navegador mais cedo ou mais tarde.

Os que são naturalmente fechados automaticamente, como <br>e <img>, devem ser óbvios. Os que não são ... simplesmente não os fecham!

AmbroseChapel
fonte
4

A última vez que verifiquei, foram os seguintes elementos vazios / vazios listados em HTML5.

Válido para autores: area, base, br, col, command, embed, eventsource, hr, img, input, link, meta, param, source

Inválido para autores: basefont, bgsound, frame, spacer, wbr

Além dos poucos que são novos no HTML5, você deve ter uma idéia dos que podem ser suportados ao exibir XHTML como text / html. (Apenas teste-os examinando o DOM produzido.)

Quanto ao XHTML serviu como application / xhtml + xml (o que o torna XML), as regras XML se aplicam e qualquer elemento pode estar vazio (mesmo que o XHTML DTD não possa expressar isso).

Shadow2531
fonte
4

Você deve dar uma olhada nas DTDs xHTML , todas elas listadas. Aqui está uma rápida revisão de todos os principais:

<br />
<hr />
<img />
<input />
e-satis
fonte
1
Marcação corrigida e limpa. Cuidado com os links nestas páginas, eles são lentos para carregar.
e-satis
4

Eles são chamados de elementos "nulos" no HTML 5. Eles estão listados na especificação oficial do W3 .

Um elemento nulo é um elemento cujo modelo de conteúdo nunca permite que ele tenha conteúdo em nenhuma circunstância.

Em abril de 2013, eles são:

área, br, col, comando, incorporar, entrada, keygen, meta, param, fonte, faixa

Em dezembro de 2018 (HTML 5.2), eles são:

área, br, col, incorporar, hora, entrada, link, meta, param, fonte, faixa

mpen
fonte
2

Outro problema de tag de fechamento automático para o IE é o elemento title. Quando o IE (apenas tentei no IE7) vê isso, ele apresenta uma página em branco ao usuário. No entanto, você "vê a fonte" e tudo está lá.

<title/>

Originalmente, vi isso quando meu XSLT gerou a tag de fechamento automático.

Kevin Hakanson
fonte
O Chromium também não gosta de <title/>tags.
uınbɐɥs
2

Não vou tentar elaborar demais isso, principalmente porque a maioria das páginas que escrevo são geradas ou a tag tem conteúdo. Os únicos dois que já me deram problemas ao fazê-los fechar automaticamente são:

<title/>

Para isso, simplesmente recorri a sempre dar a ele uma tag de fechamento separada, pois, uma vez lá em cima <head></head>, não torna o seu código mais confuso para trabalhar de qualquer maneira.

<script/>

Este é o grande problema que tive recentemente com problemas. Durante anos, eu sempre usava <script/>tags de fechamento automático quando o script vinha de uma fonte externa. Mas, recentemente, comecei a receber mensagens de erro do JavaScript sobre um formulário nulo. Após vários dias de pesquisa, descobri que o problema era (supostamente) que o navegador nunca chegava à <form>tag porque não sabia que era o fim da <script/>tag. Então, quando eu fiz isso em <script></script>tags separadas , tudo funcionou. Por que diferente em diferentes páginas que fiz no mesmo navegador, eu não sei, mas foi um grande alívio encontrar a solução!

Nathan Sokalski
fonte
-2

<hr /> é outro

Darren Kopp
fonte