Algumas tags de fechamento HTML 1 são opcionais , ou seja:
</HTML>
</HEAD>
</BODY>
</P>
</DT>
</DD>
</LI>
</OPTION>
</THEAD>
</TH>
</TBODY>
</TR>
</TD>
</TFOOT>
</COLGROUP>
Nota: Não confunda com tags de fechamento que são proibidas de serem incluídas, ou seja:
</IMG>
</INPUT>
</BR>
</HR>
</FRAME>
</AREA>
</BASE>
</BASEFONT>
</COL>
</ISINDEX>
</LINK>
</META>
</PARAM>
Nota: xhtml
é diferente do HTML. xhtml é uma forma de xml, que requer que cada elemento tenha uma tag de fechamento. A tag de fechamento pode ser proibida em html, mas obrigatória em xhtml
.
As tags de fechamento opcionais
- idealmente incluído , mas nós os aceitaremos se você os esqueceu, ou
- idealmente não incluído, mas nós os aceitaremos se você os colocar
Em outras palavras, devo incluí-los ou não ?
A especificação do HTML 4.01 fala sobre o fechamento de tags de elementos sendo opcional , mas não diz se é preferível incluí-las ou preferível não incluí-las.
Por outro lado, um artigo aleatório no DevGuru diz :
A tag final é opcional. No entanto, recomenda-se que seja incluído.
A razão pela qual pergunto é porque você sabe que é opcional por motivos de compatibilidade; e eles os teriam tornado ( obrigatórios | proibidos ) se pudessem.
Em outras palavras: o que o HTML 1, 2, 3 fez com relação a essas tags de fechamento, agora opcionais. O que o HTML 5 faz? E o que devo fazer?
Nota
Alguns elementos em HTML são proibidos de ter tags de fechamento. Você pode discordar disso, mas essa é a especificação, e não há debate. Estou perguntando sobre tags de fechamento opcionais e qual era a intenção.
Notas de rodapé
1 HTML 4.01
</p>
tags de fechamento e o segundo as omite!/>
, como<meta charset="utf-8" />
mesmo que<meta charset="utf-8">
é HTML5 válido?<meta charset="utf-8" />
é html inválido , deve ser<meta charset="utf-8">
. Por outro lado<meta charset="tuf-8">
é inválido xhtml, ele deve ser<meta charset="utf-8" />
<meta charset="UTF-8"/>
com a tag de fechamento. Caso contrário, como o poliglota ou o xhtml poderiam ser validados como html5 e xml?Respostas:
Os opcionais são todos que devem ser semanticamente claros onde terminam, sem a necessidade da tag final. Cada EG
<li>
implica um</li>
se não houver um logo antes dele.Todas as tags finais proibidas seriam imediatamente seguidas por sua tag final, portanto seria meio redundante digitar
<img src="blah" alt="blah"></img>
toda vez.Eu quase sempre uso as tags opcionais (a menos que tenha uma boa razão para não o fazer), porque empresta um código mais legível e atualizável.
fonte
<LI>
é como uma bala. Ninguém iria querer envolver um ponto inteiro com marcadores<LI>...</LI>
. Dessa forma,LI
corresponde ao que as pessoas escreveriam naturalmente durante a marcação. Sames usa uma marca de parágrafo (<P>
); no processamento de texto, você adiciona uma marca de parágrafo no início de um parágrafo; e não no final de cada um também. Portanto, nessa interpretação, as tags de fechamento são opcionais porque nenhuma pessoa normal pensaria em tê-las. Além disso, o próprio elemento não tem conteúdo - o elemento é o conteúdo.Há casos em que as tags explícitas ajudam, mas às vezes é pedantismo desnecessário.
Observe que a especificação HTML especifica claramente quando é válido omitir tags, portanto nem sempre é um erro.
Por exemplo, você nunca precisa
</body></html>
. Ninguém nunca se lembra de colocar<tbody>
explicitamente (ao ponto que o XHTML fez exceções).Você não precisa, a
</head><body>
menos que tenha scripts de manipulação de DOM que realmente pesquisem<head>
(é melhor fechá-lo explicitamente, porque as regras para o fim implícito<head>
podem surpreendê-lo).Listas aninhadas são realmente melhores sem
</li>
, porque é mais difícil criar umaul > ul
árvore incorreta .Válido:
Inválido:
E lembre-se de que as tags finais estão implícitas, se você tenta fechar todos os elementos ou não. A colocação de tags finais não tornará a análise automaticamente mais robusta:
analisará como:
Só pode ajudar quando você valida documentos.
fonte
<p>foo <p>bar</p> baz</p>
não é analisado como duasp
tags aninhadas ?<P>
elemento não pode conter elementos no nível do bloco e<P>
é um elemento no nível do bloco. De ( w3.org/TR/REC-html40/struct/text.html#edef-P ) "O elemento P representa um parágrafo. Ele não pode conter elementos em nível de bloco (incluindo o próprio P)."block
exibição de CSS é uma coisa completamente diferente do conteúdo no nível de bloco do HTML (acontece que a maioria dos elementos no nível de bloco HTML é exibida como blocos CSS por padrão).<t>
não vai funcionar<title>
.Estou adicionando alguns links aqui para ajudá-lo com a história do HTML, para você entender as várias contradições. Esta não é a resposta para sua pergunta, mas você saberá mais depois de ler esses vários resumos.
Alguns trechos de Dive Into HTML5 :
fonte
Essa é uma inferência interessante. Minha leitura é que, sempre que uma tag pode ser inferida com segurança, a tag é opcional. O design sugere que a intenção era torná-lo rápido e fácil de escrever.
O DTD para HTML 2 está incorporado no RFC que, juntamente com o DTD HTML original , possui tags de início e fim opcionais em todo o local.
O HTML 3 foi abandonado (graças às guerras do navegador) e substituído pelo HTML 3.2 (que foi projetado para descrever o estado atual da web).
O HTML 5 foi voltado para "pavimentar os caminhos" desde o início.
Ah, agora isso é subjetivo e argumentativo :)
Algumas pessoas pensam que as tags explícitas são melhores para facilitar a leitura e a manutenção em virtude de estar diante dos olhos dos leitores.
Algumas pessoas pensam que as tags inferidas são melhores para facilitar a leitura e a manutenção devido a não sobrecarregar o editor.
fonte
A resposta a esta pergunta está no rascunho de trabalho do W3C: http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission
É uma questão de estilo. Tento nunca omitir tags finais, porque isso me ajuda a ser rigoroso e não omitir tags necessárias.
fonte
Se for supérfluo, deixe de fora.
Se ele serve a um propósito (mesmo um propósito aparentemente trivial, como apaziguar seu IDE ou apaziguar seus olhos), deixe-o dentro.
Em uma especificação bem definida, é raro ver itens opcionais que não afetam o comportamento. Com exceção de "comentários", é claro. Mas a especificação HTML é menos uma especificação de design e mais um documento do estado das principais implementações atuais. Portanto, quando um item é opcional em HTML e parece não ter nenhum objetivo, podemos supor que a natureza opcional seja apenas a documentação de uma peculiaridade em um navegador específico.
Observando a seção RFC de especificação do HTML-5 vinculada acima, você vê que as tags opcionais estão estranhamente vinculadas à presença de comentários! Isso deve lhe dizer que os autores não estão usando chapéus de design. Eles estão jogando o jogo de "documentar as peculiaridades" nas principais implementações. Portanto, não podemos levar as especificações muito a sério a esse respeito.
Então, a solução é: não se preocupe. Vá para algo que realmente importa. :)
fonte
Acho que a melhor resposta é incluir tags de fechamento para legibilidade ou detecção de erros. No entanto, se você tiver muito HTML gerado (digamos, tabelas de dados), poderá economizar largura de banda significativa, omitindo tags opcionais.
fonte
Minha recomendação é que você omita a maioria das tags de fechamento opcionais e todos os atributos opcionais com os quais você pode se safar. Muitos IDEs irão reclamar, portanto, talvez você não consiga omitir alguns deles, mas geralmente é melhor para um tamanho de arquivo menor e menos confusão. Se você tiver geradores de código, definitivamente omita as tags finais porque poderá obter uma boa redução de tamanho. Normalmente, isso realmente não importa, de um jeito ou de outro.
Mas quando isso importa, aja de acordo. Em algum trabalho recente, pude reduzir o tamanho do meu HTML renderizado de 1,5 MB para 800 KB, eliminando a maioria dos atributos gerados de final e valor redundante para a tag aberta, onde o texto do elemento era o mesmo que o valor. Eu tenho cerca de 200 tags. Eu poderia implementar isso de alguma outra maneira, mas isso seria mais trabalhoso ($$$), portanto, isso me permite tornar a página mais responsiva.
Por curiosidade, descobri que, se eu removesse aspas em torno de atributos que não precisavam deles, eu poderia economizar 20 KB, mas meu IDE (Visual Studio) não gosta. Também fiquei surpreso ao descobrir que o ID realmente longo que o ASP.NET gera é responsável por 20% do meu arquivo.
A idéia de que poderíamos obter qualquer fração relevante do HTML estritamente válida foi equivocada em primeiro lugar, assim como o que funciona melhor para você e seus clientes. A maioria das ferramentas que eu já vi ou usei diz que elas geram xhtml, mas na verdade não funcionam 100% e, de qualquer maneira, não há nenhum benefício para a aderência estrita.
fonte
</p>
ou</li>
) é perfeitamente adequado de acordo com a especificação HTML. Se o navegador não entender isso, será um problema com o navegador.Pessoalmente, sou fã de XHTML e, como o ghoppe, "tento nunca omitir tags finais, porque isso me ajuda a ser rigoroso e não omitir tags necessárias".
mas
Se você estiver usando deliberadamente o HTML 4.n, não se pode argumentar que a inclusão deles facilita o consumo do documento, pois a noção de boa formação em oposição à validade é um conceito XML e você perde esse benefício quando proibir determinadas tags fechadas. Portanto, o único problema se torna validade ... e se ainda é válido sem eles ... você também pode economizar a largura de banda, não?
fonte
O uso de tags finais facilita o tratamento de fragmentos, porque seu comportamento não depende de elementos irmãos. Só este motivo deve ser convincente o suficiente. Alguém mais lida com documentos html monolíticos?
fonte
Em algumas linguagens de colchetes, como C #, você pode omitir os colchetes em torno de uma instrução if, se tiver apenas duas linhas. por exemplo...
if ([condição])
[código]
mas você não pode fazer isso ...
if ([condição])
[código]
[código]
a terceira linha não fará parte da instrução if. isso prejudica a legibilidade, e os bugs podem ser facilmente introduzidos e difíceis de encontrar.
pelas mesmas razões, eu fecho todas as tags. tags como a tag img ainda precisam ser fechadas, mas não com uma tag de fechamento separada.
fonte
Se você estivesse escrevendo um analisador de HTML, seria mais fácil analisar o HTML que incluía tags de fechamento opcionais ou o HTML que não? Acho que a presença de tags de fechamento opcionais facilitaria, pois não seria necessário inferir onde deveria estar a tag de fechamento.
Por esse motivo, sempre incluo as tags de fechamento opcionais - na teoria de que minha página pode renderizar mais rapidamente, pois estou criando menos trabalho para o analisador HTML do navegador.
fonte
<li>
tag sem tag de fechamento, em algum momento o navegador terá que decidir onde o elemento termina e agir como se você tivesse colocado uma tag final nesse ponto. Isso pode ser uma quantidade relativamente trivial de lógica, mas "alguns" ainda é mais que "nenhum" e não acho irracional supor que deixar de fora as tags finais opcionais faça mais trabalho para o navegador do que incluí-las.</table>
e sua pilha contém<table><tbody><tr><td>
, você pode simplesmente fechar tudo até combinar com o<table>
. Da mesma forma, para abrir<p>
em um contexto que não seja do relógio. Mas pode haver casos muito mais difíceis, não sei.Faça o que achar melhor para tornar o código mais legível e sustentável.
Pessoalmente, eu sempre estaria inclinado a fechar
<td>
e<tr>
, mas nunca me incomodaria<li>
.fonte
<td>
e<li>
isso faz você não se preocupar<li>
? Para mim, há pouca diferença.Para tipos de fechamento proibidos, use sintaxe como:
<img />
Com o/>
para fechar a tag que é aceita em xmlfonte