Words
XHTML: O upgrade da Web
Parte 2: Escrever documentos XHTML
Agosto 2003
Pedro Mendes
O XHTML é a linguagem de marcação certa para escrever documentos Web. Não é que não se possa usar o HTML, mas o facto é que esta linguagem está descontinuada e, mais cedo ou mais tarde, terá de ser actualizada para XHTML, sob o risco dos sites deixarem de funcionar nos novos browsers e nos dispositivos com acesso à Web. No artigo anterior fizemos uma abordagem inicial ao aparecimento e evolução do XHTML. Neste artigo vamos descrever as principais regras para escrever documentos XHTML correctamente. Aquelas que vamos abordar, são as que julgamos mais relevantes. Falaremos também da necessidade de os documentos, para além de estarem bem estruturados, serem válidos.
Algo a declarar?
Um documento XHTML deve conter dois elementos para que seja considerado válido: uma declaração do tipo de documento (DOCTYPE) e outra do namespace do XHTML, como se vê no exemplo abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
É com a inclusão destes dois elementos que o browser sabe como
interpretar os documentos.
Na primeira linha declaramos o DOCTYPE (abreviatura de “document type
declaration”), que deve estar presente no principio de todas as páginas.
É através do DOCTYPE que as ferramentas de validação
sabem qual a versão de (X)HTML que está a ser usada no documento,
para o poderem validar de acordo com as regras da sua especificação.
No exemplo, declara-se um documento que usa o XHTML versão 1.1.
Na segunda linha do exemplo define-se um namespace padrão para o documento
XML. O namespace é uma colecção de elementos e nomes
de atributos únicos, e aponta para o documento do W3C relacionado.
Tudo em minúsculas
Todos os nomes de elementos e atributos são escritos em minúsculas. Isto porque, ao contrário do HTML que neste aspecto era mais permissivo, o XML é case sensitive, ou seja, destingue caracteres maiúsculos e minúsculos. Se esta regra não for seguida, o documento é inválido.
Exemplos de escrita incorrecta em XHTML:
<H2>Log</H2>
<STRONG>Fight</ STRONG >
Exemplos de escrita correcta em XHTML:
<h2>Log</h2>
<strong>Fight</strong>
Devemos proceder de igual forma para todas as tags e nomes de atributos.
“Entre aspas”
Todos os valores dos atributos são escritos entre aspas. Esta é mais uma diferença em relação ao HTML. Onde antes podíamos ter os valores dos atributos sem aspas, em XHTML eles têm de estar obrigatoriamente entre aspas, como vemos abaixo.
width = 100 Incorrecto em XHTML
width = ”100” Correcto em XHMTL
Aninhar as tags
Todas as tags são aninhadas correctamente umas nas outras. Esta é uma regra básica para escrever HTML ou XHTML de qualidade. Se, até agora, os browsers têm perdoado certas práticas de codificação menos correctas, tudo indica que as próximas versões não o façam. Por isso, a melhor abordagem será criar o hábito de, desde já, aninhar as tags na ordem correcta. Um exemplo ilustra melhor este ponto.
Exemplo de tags incorrectamente aninhadas:
<p><strong>Este é um exemplo de tags incorrectamente aninhadas</p></strong>
Exemplo de tags correctamente aninhadas:
<p>Este é um exemplo de <strong>tags</strong> correctamente
aninhadas</p>
Em resumo, a última tag a ser aberta deverá ser a primeira a ser fechada.
O que abre tem de fechar
Todos os elementos não vazios devem ser terminados com uma tag de fecho. Esta é mais uma diferença importante em relação ao HTML, onde se podem deixar tags como <li> e <p> abertas. Em XHTML todas as tags têm de ser abertas e fechadas.
Em XHTML, o seguinte código é inválido:
<p>Este parágrafo não foi fechado <p>O código é inválido em XHMTL
A versão válida do código anterior é:
<p>Este parágrafo foi fechado com a tag correspondente</p> <p> O código é válido em XHTML</p>
Os elementos vazios também fecham
Existem elementos, tais como br, img e hr que não têm tag de fecho. Denominados elementos vazios, também requerem uma espécie de terminação, neste caso por meio de uma barra ( / ) no final da própria tag.
Os seguintes elementos são inválidos em XHTML:
<img src="torre.gif">
<br>
<hr>
Esta é a versão em XHTML válido dos mesmos elementos:
<img src=" torre.gif" />
<br />
<hr />
Reparem que incluímos um espaço em branco antes da barra. Isto
permite evitar que as versões dos browsers anteriores ao standard XHTML
tenham um comportamento não desejado.
É de referir ainda algo importante: para que seja válida e acessível,
a tag “image” no primeiro exemplo tem de incluir o atributo obrigatório
“alt”, como se vê abaixo.
<img src="torre.gif" alt=”Torre de Belém” />
Validar é preciso
O último passo, antes de a nossa página estar concluída, é verificar se ela é válida e se aplicámos as regras que descrevemos, e outras, de forma correcta. Os documentos devem validar contra o DTD que foi declarado no inicio do código. Existem vários serviços online que permitem validar um documento XHTML. Os dois mais conhecidos são o serviço do W3C e o Web Design Group. Estes serviços percorrem o código da página submetida, comparam-na com a definição declarada, e produzem um relatório com os erros encontrados ou então, ainda melhor, a indicação de que não foram encontrados erros.
A melhor abordagem para corrigir eventuais erros é, primeiro de tudo, não se assustar com a possível longa lista que aparece, começando calmamente por resolver o primeiro erro mostrado. Por vezes, muitos dos erros seguintes decorrem do primeiro sendo que, ao resolvê-lo, grande parte dos outros desaparecem, por estarem encadeados.
O melhor conselho que podemos dar é que estruturem o código o melhor possível, sigam as regras que aqui descrevemos, e depois validem, validem. E antes que me esqueça ... validem!
Outras leituras
XHTML: O upgrade da Web - Parte 1: As origens, por Pedro Mendes
Fix your site with the right DOCTYPE, por Jeffrey Zeldman @ A List Apart
