Manual de XHTML
XHTML é uma versão mais limpa e rigorosa do HTML. Neste artigo veremos a diferença entre HTML e XHTML e como usar bem tal ferramenta.
Parte 2: Diferenças entre HTML e XHTML
O XHTML não é muito diferente do padrão HTML 4.01.
Portanto, se você escrever sua página seguindo o HTML 4.01 já é um bom começo.
Além disso, você deve começar agora a escrever o seu código HTML em letras minúsculas, e nunca esquecer as tags de fechamento (como </p>).
As diferenças mais importantes são:
Em XHTML, todos os elementos devem estar devidamente aninhados uns dentro dos outros, como este:
Nota: um erro comum com listas aninhadas é esquecer que a lista mais interna deve estar entre tags <li> e </li>. Isto, por exemplo, está errado:
Já este exemplo está correto:
Note que inserimos um </li> depois da tag </ul> neste último exemplo.
Já este trecho está ótimo:
O interessante é que os elementos vazios também devem ser fechados. Não use conforme visto abaixo:
Uma quebra de linha: <br>
Uma linha horizontal: <hr>
Uma imagem: <img src="happy.gif" alt="Happy face">
Escreva assim:
Uma quebra de linha: <br/>
Uma linha horizontal: <hr/>
Uma imagem: <img src="happy.gif" alt="Happy face"/>
Agora o correspondente exemplo correto:
O estrutura básica de um arquivo XHTML é:
Portanto, se você escrever sua página seguindo o HTML 4.01 já é um bom começo.
Além disso, você deve começar agora a escrever o seu código HTML em letras minúsculas, e nunca esquecer as tags de fechamento (como </p>).
As diferenças mais importantes são:
- Elementos XHTML devem estar devidamente aninhados
- Elementos XHTML devem estar sempre fechados
- Elementos XHTML devem estar sempre em minúsculas
- Documentos XHTML devem ter um elemento raiz
Elementos XHTML devem estar devidamente aninhados
Em HTML, alguns elementos podem ser encaixados dentro de si, indevidamente, como neste exemplo:
<b> <i> Este texto está em negrito e itálico </b> </i>
Em XHTML, todos os elementos devem estar devidamente aninhados uns dentro dos outros, como este:
<b> <i> Este texto está em negrito e itálico </i> </b>
Nota: um erro comum com listas aninhadas é esquecer que a lista mais interna deve estar entre tags <li> e </li>. Isto, por exemplo, está errado:
<ul>
<li> Café </li>
<li> Chá
<ul>
<li> Chá preto </li>
<li> Chá verde </li>
</ul>
<li> Leite </li>
</ul>
<li> Café </li>
<li> Chá
<ul>
<li> Chá preto </li>
<li> Chá verde </li>
</ul>
<li> Leite </li>
</ul>
Já este exemplo está correto:
<ul>
<li> Café </li>
<li> Chá
<ul>
<li> Chá preto </li>
<li> Chá verde </li>
</ul>
</li>
<li> Leite </li>
</ul>
<li> Café </li>
<li> Chá
<ul>
<li> Chá preto </li>
<li> Chá verde </li>
</ul>
</li>
<li> Leite </li>
</ul>
Note que inserimos um </li> depois da tag </ul> neste último exemplo.
Elementos XHTML devem ser sempre fechados
Lembre que os elementos não vazios devem ter uma tag de fechamento. Por exemplo, o trecho abaixo não está corretamente escrito:
<p> Este é um parágrafo
<p> Este é outro parágrafo
<p> Este é outro parágrafo
Já este trecho está ótimo:
<p> Este é um parágrafo </p>
<p> Este é outro parágrafo </p>
<p> Este é outro parágrafo </p>
O interessante é que os elementos vazios também devem ser fechados. Não use conforme visto abaixo:
Uma quebra de linha: <br>
Uma linha horizontal: <hr>
Uma imagem: <img src="happy.gif" alt="Happy face">
Escreva assim:
Uma quebra de linha: <br/>
Uma linha horizontal: <hr/>
Uma imagem: <img src="happy.gif" alt="Happy face"/>
Elementos XHTML sempre com letras minúsculas
Nas versões anteriores do HTML, era possível escrever os elementos tanto com minúsculas como com maiúsculas. Ou seja, poderíamos encontrar em uma mesma página os elementos <H1> e <h1> e não havia "problemas". A não ser, é claro, pela bagunça. Então em XHTML isso foi "resolvido". Usamos apenas letras minúsculas. Novamente, veja um exemplo incorreto:
<BODY>
<P> Este é um parágrafo </P>
</BODY>
<P> Este é um parágrafo </P>
</BODY>
Agora o correspondente exemplo correto:
<body>
<p> Este é um parágrafo </p>
</body>
<p> Este é um parágrafo </p>
</body>
Documentos XHTML devem ter um elemento raiz
Todos os elementos XHTML devem estar aninhados dentro do elemento raiz <html>. Elementos "filhos" devem vir em pares, e ser corretamente aninhados dentro do seu elemento pai.O estrutura básica de um arquivo XHTML é:
<html>
<head> ... </head>
<body> ... </body>
</html>
<head> ... </head>
<body> ... </body>
</html>
Particularmente eu descobri que muitos problemas de "incompatibilidade" de Java Script eram simplesmente erros de sintaxe, que alguns nagegadores (IE) toleravam.
Bom artigo.