Migrando HTML para XHTML

Finalmente criei vergonha na cara e, na versão mais recente do meu portfólio, usei XHTML. Mas, afinal, o que isso significa?
Primeiramente, o XHTML (eXtensible Hypertext Markup Language) foi desenvolvido como um HTML voltado ao desenvolvimento XML. O XML precisa de uma linguagem de formatação mais rígida: quando os navegadores encontram um erro no HTML comum, como uma tag
sem o
, o erro é "consertado" automaticamente e ainda sim o usuário consegue visualizar a página; já com o XML, um erro desses faz a aplicação parar.
Além disso, cada navegador conserta o erro à sua maneira, o que significa que o que você vê funcionando num dispositivo pode virar uma bagunça em outro. Ou seja, o XHTML é a garantia de que seu site será exibido exatamente como você o desenvolveu, independente do dispositivo de saída - ou de se você trabalha com XML ou não. Isso evita o uso de hacks para corrigir bugs de navegadores (deixando a navegação mais rápida, já que o navegador não tem que processar essas correções) e ainda deixa seu código organizado para atualizações futuras.

As diferenças na prática

A primeira diferença é que todas as tags devem ser fechadas. No HTML, para separar um parágrafo do outro, você simplesmente colocava um
entre eles, e funcionava. Como isso estava errado, isso não será validado no XHTML: um parágrafo deve vir entre um
e um
, como manda a boa e velha organização.

Certo:

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

Errado:

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

Alguns elementos já têm uma tag de fechamento, como e
, e , etc. Em elementos sem tag de fechamento, usa-se uma barra no final, como
/>,

---

/> e /> Uma coisa que ainda me dá trabalho é que todas as tags e atributos devem 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:

Lorem ipsum dolor sit amet, 
 consectetuer adipiscing elit.

Errado:

Lorem ipsum dolor sit amet, 
 consectetuer adipiscing elit.

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:

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

Errado:

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:

Lorem  href="http://lip.com/">ipsum dolor sit amet ...

Errado:

Lorem  href="http://lip.com/">ipsum dolor sit amet ...

Não esqueça da acentuação! Os caracteres acentuados devem ser substituídos pelos seus códigos, especialmente o caracter & (e comercial), que é substituído pelo & mesmo em links. Uma tablea de acentuação e caracteres especiais pode ser encontrada neste link.

Certo:

Meu parágrafo tem acentuação e um
&color=blue">link

Errado:

Meu parágrafo tem acentuação e um 
 &color=blue">link

Mais uma regra é que o documento deve estar bem estruturado, com as tags principais (, e ) 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.

	



...



...

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

Certo:
id="ancora"> ancora
Errado:
name="ancora"> ancora

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

Certo:

Errado:

Mas e as desvantagens?

Bom, o XHTML não é suportado em navegadores antigos, como versões anteriores à 6 do IE. Mas, na prática, quando você migra do HTML para o XHTML num site comum só garante a organização do seu documento. Tags que agora são fechadas (como
) são interpretadas normalmente. Aqui vale o bom senso: consulte suas estatísticas de acesso, e se seus usuários ainda estiverem com os navegadores desatualizados aposte num HTML organizado.
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.

Posted in: Aulas Tutorias