A partir daí, o W3C seguiu uma série de esforços para padronizar, principalmente, a linguagem HTML, base da web, que chegou até a sua versão 4.01, antes de ser revista pelo órgão. Esta revisão foi para atender à idéia de Berners-Lee da web semântica. Para isso, o HTML foi re-escrito como uma estensão do XML, eliminando todos os elementos de formatação da linguagem, dando origem ao XHTML. Para atender à necessidade de formatar estes documentos, foi criada a linguagem CSS.

A web semântica consiste em organizar os documentos web de tal forma, que estes possam ser interpretados automaticamente, facilitando a pesquisa e cruzamento das informações dos documentos. Ou seja, além da informação, a máquina saberia distinguir a que se refere esta informação. Um exemplo prático disso é que, se utilizassemos o elemento address para definir o endereços em nosso site, uma ferramenta de busca poderia criar uma indexação destes endereços, e disponibilizar para o usuário. Quantas vezes você visitou o site de uma empresa e cansou de procurar pelo endereço, ou um telefone de atendimento ao cliente?

Hoje, nós, desenvolvedores web podemos comemorar muitos avanços, mas ainda estamos longe de uma real padronização dos navegadores.

O XHTML é a linguagem utilizada para escrever os documentos web. Se você está estranhando o X na frente do HTML, não há muito o que se preocupar. O XHTML é a junção das linguagens XML e HTML. Dessa forma, todas as regras de sintaxe aplicadas a um documento XML, devem se aplicar ao documento XHTML.

Estas alterações de sintaxe não são tão complexas, alguns exemplos dessas modificações são:

• As tags e seus atributos devem ser em letras minúsculas;
• Todas as tags devem, obrigatóriamente, ser fechadas, inclusive as tags img e br.

Estas diferenças podem ser encontradas em diversas referências na internet. Porém, a mais importante alteração a ser realizada no seu documento não é a sintática, e sim a semântica. Deve-se conhecer os elementos XHTML para usá-los corretamente, ou seja, utlizar as tags certas para descrever as informações no seu documento, sendo importante lembrar que estas tags já existiam no HTML. Vemos no exemplo abaixo, um exemplo muito comum de código para definição de um título:

Meu Título

Definimos na estrutura do documento, que o título da página será do tamanho 16px em vermelho e negrito. Porém, se tivéssemos conhecimento da linguagem, utilizaríamos a tag h1, para definir títulos na página:

Meu Título

Para saber se seu código está semanticamente correto, é preciso se perguntar se uma máquina seria capaz de entender a que se refere o trecho de código. No primeiro exemplo, a maquina sabe que deve escrever o texto “Meu Título” em negrito, vermelho e tamanho de 16px. No segundo, ele sabe que “Meu Título” é um Cabeçalho nível 1.

Outra mudança no seu documento será a estruturação do mesmo. Se você divide áreas como Topo, Navegação, Conteúdo e Rodapé utilizando tabelas (table), revendo a documentação do XHTML, você descobrirá a existência da tag div, criada justamente para definir divisões de blocos dentro do seu documento, ou ainda, a tag span, para definir divisões em linha do documento.

Abolir os elementos de formatação é outra medida necessária para a adoção dos padrões web. Esqueça que as tags font, b e i, dentre outras, assim como atributos de formatação, como background e color, entre outros. Estes elementos estão em desuso e serão, possívelmente, removidos de especificações nas versões futuras do XHTML. No lugar da tag b, que indica bold (negrito), por exemplo, substitua pela tag strong, que indica força. O efeito inicial nos navegadores é o mesmo, pois em ambas, por padrão, deixarão seu texto em negrito. Porém, você pode definir na formatação que força no seu documento é uma letra normal, escrita com outra cor, o que não faria sentido definir um estilo desses em uma tag denominada “negrito”.

Tenha em mente que você está apenas estruturando o seu documento, escreva toda a sua página sem qualquer estilo, e veja se é um documento legível para nós na tela do navegador, com um código semântico para as máquinas. Depois disso, você pode pensar em formatar seu documento utilizando a linguagem definida para isso, o CSS, que será assunto de um outro post.

Vi no WaSP que saiu no IEBlog uma lista de mudanças realizadas no Internet Explorer 7. De fato, parece que muitos bugs de CSS conhecidos foram corrigidos, e que o pessoal da Microsoft está interessado em seguir as definições do W3C.

Quando comecei a estudar os padrões web, tinha a preocupação de testar as páginas em navegadores ditos antigos na época. Porém, eu me preocupava apenas com o Internet Explorer 5.x e seu famoso bug de box model, dentre outros. No livro Projetando web sites compatíveis, do Zeldman, os navegadores antigos eram Netscape e Internet Explorer 4.

Passado algum tempo, novos navegadores foram lançados e, graças à minha resistência de demorar um pouco para atualizar os programas, comecei a notar que os desenvolvedores não estão mais preocupados em compatibilizar seus produtos com os ‘novos navegadores antigos’.

Até o navegador queridinho do desenvolvedor web, Firefox, na versão 1.0.x, ou mesmo o antigo Mozzila apresentam erros de renderização em diversos sites, inclusive nos mais famosos blogs sobre o padrões web no Brasil. Geralmente as diferenças são muito menores do que no princípio, mas as vezes o resultado pode prejudicar a experiência do usuário no site.

Pergunta desafio: Devo me preocupar com isso? A resposta, pra mim, é sim, mas não precisa correr imediatamente para compatibilizar seu site. Se descabelar por que um campo está passando um pouco a largura da área dele, sem prejudicar o usuário, é um exagero. Porém, quando o menu de letras brancas fica invisível por que caiu pra linha de baixo num fundo branco, é preciso tomar uma atitude.

Conclusão resumida: Use o bom senso, mas verifique o funcionamento do seu site também nos “novos navegadores antigos”.