Migrando do HTML para o XHTML

Por Erika Sarti, em 18_09_2006. Atualizado em 16_08_2011.

Introdução

Em 2006, tive a necessidade de atualizar o meu portfólio. Aproveitei a ocasião para aplicar XHTML (eXtensible Hypertext Markup Language) no site. Mas, o que isso significa? Qual a diferença entre XHTML e HTML? Saiba as respostas a seguir.


O que é XHTML?

Em poucas palavras, o XHTML é uma espécie de junção entre o HTML e o XML. O XML é uma especificação bastante rígida: quando os navegadores encontram um erro no HTML comum, como uma tag <p> sem o </p>, o erro é "consertado" automaticamente e, com isso, o usuário geralmente consegue visualizar a página normalmente; já com o XML, um erro desse tipo faz a aplicação parar.

Além disso, cada navegador conserta o erro à sua maneira, o que significa que o que você vê funcionando em um dispositivo pode virar bagunça em outro. Desta forma, ao combinar HTML com XML, o XHTML resultante é a garantia de que seu site será exibido exatamente como você o desenvolveu, independente do dispositivo. Isso evita o uso de hacks para corrigir problemas de exibição em determinados navegadores e ainda deixa seu código organizado para atualizações futuras.


As diferenças do XHTML na prática

O assunto é extenso, mas vamos abortar alguns pontos aqui. A primeira diferença é que todas as tags devem ser fechadas. No HTML, para separar um parágrafo do outro, se você simplesmente colocar um <p> entre eles, o navegador irá aceitar. Como isso, na verdade, está errado, o código não será validado no XHTML: um parágrafo deve vir entre um <p> e um </p>, como manda a boa e velha organização.

Certo:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nam quis nunc at diam euismod rhoncus.</p>
<p>Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut,
consectetuer et, tempus eu, urna.</p>

Errado:

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nam quis nunc at diam euismod rhoncus.
<p>
Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut,
consectetuer et, tempus eu, urna

Alguns elementos têm tag de fechamento, como <p> e </p>, <strong> e </strong>, etc. Em elementos sem tag de fechamento, usa-se uma barra no final, como <br />, <hr /> e <img ... />.

Uma coisa que costuma dar trabalho é o fato de que todas as tags e atributos deverem estar em letras minúsculas. Eu, que tinha o vício de escrever tudo em maiúsculas porque achava visualmente organizado, ainda esbarro nos meus próprios erros. Mas no final o código realmente fica mais "leve" de se ler.

Isso também vale para códigos de JavaScript: OnMouseOver deve ser substituído por onmouseover, por exemplo.

Certo:

<p>Lorem <strong class="estilo">ipsum dolor sit amet</strong>, 
consectetuer adipiscing elit.</p>

Errado:

<P>Lorem <B CLASS="estilo">ipsum dolor sit amet</b>, 
consectetuer adipiscing elit.</P>

Valores de atributos devem estar entre aspas, e a tag img deve, obrigatoriamente, ter o atributo alt. Assim, se o dispositivo de saída não exibir imagens, um texto alternativo com certeza irá substituí-la.

Se o texto alternativo não se aplica a alguma imagem no seu site, você pode utilizar um espaço (alt=" ").

Certo:

<img src="imagem.jpg" width="200" height="100" border="0" alt="foto" />

Errado:

<img src=imagem.jpg width=200 height=100 border=0>

Os elementos devem estar corretamente aninhados. Então se você abre um negrito dentro de um link, deve primeiro fechar o negrito e depois o link, fechando-os na ordem reversa, assim:

Certo:

<p>Lorem <a href="http://lip.com/">ipsum dolor sit <strong>amet</strong></a> ...</p>

Errado:

<p>Lorem <a href="http://lip.com/">ipsum dolor sit <strong>amet</a></strong> ...</p>

Mais uma regra: o documento deve estar bem estruturado, com as tags principais (<html>, <head> e <body>) corretamente aninhadas e devidamente fechadas. A declaração DOCTYPE também é obrigatória e, por não ser uma tag propriamente dita, não precisa ser fechada nem estar em letras minúsculas.

<!DOCTYPE ...>

<html>

<head>
...
</head>

<body>
...
</body>

</html>

Nos elementos a, applet, form, frame, iframe, img e map o atributo name foi substituído pelo id.

Certo:

<a id="ancora"> ancora </a>

Errado:

<a name="ancora"> ancora </a>

E, finalmente, não faça linhas de separação nos comentários com o caracter "-". Prefira *, = ou #, assim:

Certo:

<!-- ************************************ -->

<!-- #################################### -->

<!-- ==================================== -->

Errado:

<!-- ------------------------------------ -->


Finalizando

Há desvantagens no XHTML? Bom, o XHTML não é suportado em navegadores antigos, mas, atualmente, isso não chega a ser uma problema... Na prática, quando você migra do HTML para o XHTML em um site comum, garante ao menos a organização do seu documento.

O importante é sempre manter seu código limpo, tomando cuidado com a semântica (ou seja, utilizando uma tag para o que ela foi feita, e não para "quebrar galhos"). Tendo essa preocupação, não importa se você resolver migrar para o XHTML ou preferir continuar no HTML, seus sites sempre serão acessíveis, independente do dispositivo.


Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do InfoWester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.