Introdução a Semântica Web

Por: Henrique Pereira

Categoria: HTML / CSS / JavaScript

Analisando a documentação disponível na W3C, percebo que a linguagem muitas vezes é técnica demais para a maioria dos estudantes e muitas vezes é necessário muito conhecimento para compreender certos textos lá publicados. É difícil encontrar algo que forneça técnica junto com significado e ao mesmo tempo, acessível aos estudantes iniciantes e uma constante referência aos já iniciados. Há muitos textos em português medíocres e fragmentados, limitando-se a macetes e gambiarras, não ensinado ao desenvolvedor o real significado daquilo que ele utiliza. Geralmente o iniciante que se empenha em aprender lendo aqueles documentos acaba desistindo. Até mesmo as documentações da W3C traduzidas para o português, muitas delas pelo Maurício Samy da Silva, o Maujor, continuam sendo técnicas demais para os iniciantes, mesmo sendo referências indispensáveis. De qualquer maneira, meu conselho é que nunca deixar de ler estas documentações no site do Maujor que são verdadeiras pérolas da W3C para o desenvolvimento web.

Eu me lembro de quando estava começando meus estudos de HTML, e me deparei com a dificuldade de definir certos termos, mesmo sabendo usá-los e quando usá-los, e muitas vezes não sabia o que significavam como semântica, tag, doctype, hacks etc. Melhor do que saber é entender o que está sendo feito e interpretado. Por isso quero escrever uma série de estudos e artigos sobre semântica web que descrevem detalhadamente cada elemento, sua importância e significado.

Para começar, nada melhor do que iniciar definindo o que é semântica. Semântica é uma palavra de origem grega (semantiké) que traduzida seria "a arte da significação". É o estudo do significado das palavras e de sua relação de significação nos signos lingüísticos. Signo é todo objeto ou símbolo que tem um significado por si mesmo, como a cruz que representa o cristianismo, a cor vermelha como um sinal de pare, uma palavra qualquer como "cadeira" que nos remete a um objeto no mundo real. Tudo isto é signo e as "tags" são os signos que serão objetos dos nossos estudos direcionados a web. Pra nós desenvolvedores, o tema semântica é o estudo desses signos chamados de tags, sua relação uns com os outros e sua aplicabilidade.

Escrever algo semanticamente correto, nada mais é do que utilizar-se desses símbolos (leia-se tags) considerando o significado real pelo qual foram criados. Por exemplo, se você no conteúdo do seu HTML for falar sobre a ONU, você não precisar ficar escrevendo Organização das Nações Unidas toda vez que for fazer referências sobre a organização. Ate mesmo porque provavelmente o seu público e todo mundo sabe o que ONU significa. Por estilo, talvez apenas na primeira referência que você fizer você pode escrever o nome por extenso, mas depois, você pode apenas escrever "ONU" e no seu código XHTML, você escreve da seguinte maneira:

<acronym title="Organização das Nações Unidas">ONU</acronym>

O que isto significa? Os sistemas de indexação como os mecanismos de busca do Google, vão armazenar as duas palavras do seu documento para uma eventual busca. Se você não utilizar a tag <acronym> e somente usar a palavra ONU no seu documento, quando alguém fizer uma busca no Google por extenso da frase "Organização das Nações Unidas", seu documento não será referenciado e nem encontrado pelos buscadores por não possuir nenhuma referência a esta frase, mesmo que todo mundo saiba que "ONU" signifique "Organização das Nações Unidas". Se a busca tivesse sido feita por ONU, a historia seria outra, mas como não foi, seu documento não foi encontrado. Você precisa dizer para os mecanismos de busca que ONU é um acrônimo e dizer o seu real significado. É preciso descrever todos os acrônimos como FEBEM, AIDS, XHTML, SBF, MERCOSUL, ALCA, URSS etc, se você quiser que os buscadores indexem estas palavras com seus significados, mesmo que você saiba o significado delas.

Escrever algo semântico então, é utilizar uma tag no contexto certo para a qual ela foi criada. Veja alguns erros comuns e algumas tags que poderiam ser utilizadas mas que muitas vezes são esquecidas:

• - A tag <table> foi criada para exibir dados tabulares e não pra estruturar sites.
• - Usar a tag <br /> para simular parágrafos, onde a tag <p> poderia ser usada.
• - Usar qualquer outra tag que não seja os headings (títulos) como h1, h2, h3, etc, para declarar títulos.
• - Quando usar uma citação em um texto coloque entre a tag <cite>.
• - Tudo que for uma lista, como menus, itens, tópicos etc, utilize as tags <ul> (lista sem ordem) ou <ol> (lista ordenada) juntamente com a tag <li> (lista).
• - Quando fizer um formulário de inserção de dados utilize a tag <label> (rótulo) para declarar o nome do campo.

Espero que este texto tenha servido como uma introdução ao estudo de semântica web.

Critique e comente este artigo.

Me escreva o que você achou e se o texto deixou dúvidas ou lacunas.

Nos próximos artigos, vou falar sobre as estruturas de um documento XHTML, sobre a importância do CSS, tags etc.

Artigos relacionados:

• Semântica de listagens
• Validação e Semântica
• Semântica de Títulos
• A semântica do span e do div
• Microformats
• Folksonomia e a maneira com que nós colocamos ordem nas coisas
• Semântica de Formulários

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!