www.infowester.com
Páginal inicial 
Hardware
Software
GNU/Linux
Dicas
Tutoriais
Colunas
Web
Notícias
Blog
Sites Úteis
Newsletter
Fórum
Contato
Notícias Recentes
Últimas do Blog
Migrando do HTML para o XHTML
Por Erika Sarti, em 18/09/2006.
|
|
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 <p> sem o </p>, 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 <p> entre eles, e funcionava. Como isso estava errado, isso 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.
Alguns elementos já têm uma tag de fechamento, como <p> e </p>, <b> e </b>, etc. Em elementos sem tag de fechamento, usa-se uma barra no final, como <br />, <hr /> e <img ... />
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
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:
<p>Lorem <b class="estilo">ipsum dolor sit amet</b>,
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 <b>amet</b></a> ...</p>Errado:
<p>Lorem <a href="http://lip.com/">ipsum dolor sit <b>amet</a></b> ...</p>
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:
<p>Meu parágrafo tem acentuação e um
<a href="http://site.com/pag=home&color=blue">link</a></p>Errado:
<p>Meu parágrafo tem acentuação e um
<a href="http://site.com/pag=home&color=blue">link</a></p>
Mais uma regra é que 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.
Nos elementos a, applet, form, frame, iframe, img e map o atributo name foi substituído pelo id.<!DOCTYPE ...> <html> <head>
...
</head> <body>
...
</body> </html>
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:
<!-- ------------------------------------ -->
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 <br />) 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.
Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.