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" loading="lazy" width="200" height="100" border="0" alt="foto" />
Errado:
<img src=imagem.jpg loading="lazy" 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 -.