Web standards, arquitetura da informação, usabilidade, acessibilidade, tecnologia, filosofia de buteco (sic), e qualquer coisa em uma casca de noz!

Ir direto para o conteúdo

Introdução a Semântica Web

Por: Henrique Costa Pereira

Sábado 20 Agosto 2005 às 14:49

Categoria: Uncategorized

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:

  • None Found

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!

Existem 19 comentários para “Introdução a Semântica Web”

# 1° Andressa Domingo 08 Abril 2007 às 23:20GMT

O site fala pouca coisa sobre semântica. Eu queria que tivesse um site que falasse especificamente sobre semântica e que desse também exemplos.

# 2° Tiago Curcio Quarta-feira 31 Outubro 2007 às 14:09GMT

Henrique, Post bacana, ja trablho com semantia a um tempo, estou pensando em começar com os microformatos.

Abraço..

# 3° Raul Souza Lima Segunda-feira 05 Novembro 2007 às 15:33GMT

Muito bom o artigo para quem está começando Henrique, parabéns!

# 4° Leon Santiago Quarta-feira 28 Novembro 2007 às 14:07GMT

Olá, Henrique. Estou iniciando os estudos e achei o texto ótimo. Consigo entender a idéia geral da coisa, mas me perdi n seu site ao procurar as sequências desse artigo.

Parabéns e obrigado!

# 5° Leandro Terça-feira 03 Março 2009 às 20:21GMT

Oi Henrique, atualmente estou estudando mais sobre semantica e esses dias precisei trabalhar com uma lista que tivesse titulos. Pois bem, vi no site da W3C que as tags DL, DT e DD são as corretas pra fazer isso. Hoje lendo esse texto no seu blog, vi que voce falou apenas a respeito de UL e OL. Entao, queria saber de voce o que voce do uso dessas tags e se elas realmente continuam recomendadas pela W3C.
Parabens pela iniciativa e pelo texto.

# 6° Leandro Terça-feira 03 Março 2009 às 20:33GMT

Oook! Ja vi logo abaixo do texto o link que voce fala de listas.

Valeu novamente!

# 7° Italo Ferreira Quarta-feira 01 Abril 2009 às 17:49GMT

Muito bom o artigo, demostrou claramente a necessidade do uso de padroes para a web.

Deixe um comentário

Observação: Todos os campos obrigatórios estão marcados com um asterisco (*).

Informações de Contato

Sobre o Revolução Etc

Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Publicidade

  • Banner
  • Banner

Livros

Livros que vão colocar minhocas na sua cabeça.

Música na vitrola

Basicamente são minhas bandas preferidas.

Henrique Costa Pereira - Revolução Etc - (CC) Alguns Direitos Reservados - Powered by WordPress

O conteúdo deste site de autoria de Henrique Costa Pereira está sob a licença de Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil. Permissões e/ou restrições além do escopo desta licença podem ser vistas e/ou requeridas na minha página de licença.

Nenhum conteúdo deste site pode ser copiado e reproduzido em outro site sem autorização do autor! Mais detalhes aqui!

Powered by WordPress