A Semântica ausente…

Janeiro 23rd, 2007

Desde que consegui o primeiro resultado importante nos buscadores por causa do uso da semântica, toda vez que vou fazer um novo site, observo como os sites concorrentes estão aparecendo na busca.

Observar significa olhar o código fonte, saber se lá dentro algum esforço foi feito para que uma posição entre os primeiros fosse alcançada, ou seja, se quem fez o site usou os padrões da web, se tem alguma idéia do que são e se a idéia está sendo usada com bom senso.

Todas as observações que fiz até agora me passaram a impressão de pouca popularidade dos padrões da web entre a maioria dos designers e talvez você já saiba disso.

Verificando isso e sabendo como tratar o conteúdo do site (conteúdo semanticamente bem tratado + formatação separada), instruo o meu cliente sobre a importância do que quer colocar (conteúdo) no site e, a partir daí, busco arrancar o máximo do que ele pode oferecer.

O vício do uso das tabelas nos layouts que fizemos antes de usarmos os padrões acabou nos afastando das tags. Olhar o código fonte nem nos passava pela cabeça e o importante era encontrar e instalar o editor com os melhores recursos para o trabalho visual.

Todos os vícios que trazemos do tempo das tabelas não são corrigidos apenas quando começamos a dar atenção ao nosso código e trocamos e edição visual pela edição “na unha”, quando trocamos as tabelas por divs, quando começamos a usar css (e isso geralmente é feito para colorir as barras de rolagem da janela) . A edição “na unha” e a validação do código não garantem a semântica que ajudará o site a figurar entre os primeiros em um mecanismo de busca. É preciso, com o que nos foi fornecido como conteúdo, olhar e decidir…. “ôpa… isso é parágrafo, isso é título, isso é subtítulo, isso é o endereço do cliente, etc.”

Como em web standards estamos em constante aprendizado (assim como em todas as outras coisas), vou usar o exemplo que vi outro dia quando investigava o site de um dos jornais mais importantes do Brasil justamente procurando saber como andava a semântica por lá.

Vejam só o código que eu encontrei para o título de uma das notícias:

<font class=”titulo”>Capitais reduzem parcela no PIB de 1999 a 2004</font>

Como eu disse esse é um título de uma das notícias do site. Vejam que, além de não usarem uma tag de título apropriada como H2 que cairia como uma luva, nem mesmo um simples parágrafo foi usado. Pior do que isso… o texto foi jogado dentro da tag FONT, o que privilegia o Internet Explorer (visto que essa tag foi criada para ele) e basta navegarmos no site com qualquer browser que não seja o IE e pronto… os títulos das notícias simplesmente não são destacados como, com certeza, queriam os donos do site.

Desconfio até de uma certa boa intenção quando criaram na CSS uma classe com o nome de “título”. Mas, nesse caso, isso não serviu para nada além de aplicar a formatação especificada na CSS. Só para isso.

Com o mínimo de semântica nesse caso específico, pense em quantos títulos de notícias sem o uso da tag apropriada e os robôs fazendo o seu trabalho de indexação e não enxergando esses títulos sem a importância que eles deveriam ter. Vamos lembrar também que essas páginas ficam no servidor por um tempo considerável (não sei quanto, mas muito…) e toda a importância (relevância) durante esse tempo não consegue ser relevante como deve e merece.

Categoria(s): XHTML, Observatório Semântico

Technorati icon

2 Comentários Insira o seu...

  • 1. Wender  |  Janeiro 25th, 2007 at 1:45 pm

    Grande Mestre … estou super feliz de ver o novo trabalho no ar para todos poderem acompanhar e conferir !

    A matéria esta muito bem escrita e pode ser um grande gancho para aqueles que ainda não observaram a importância de fazer um site que produz resultados.

    Sucesso e parabéns …

    Um abraço,

    Wender

  • 2. Renato  |  Fevereiro 14th, 2007 at 1:52 am

    Realmente muito bom o projeto, mais um ótimo site que estarei acompanhando já que estou no aprendizado de tableless, semântica, seo, etc. Parabéns!

Deixe seu Comentário

Requerido

Requerido, não exibido

XHTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>




Posts mais recentes