HTML semântico? Afinal, o que é isso?

2 comentários // 2 de fevereiro, 2010 // Artigos // Tags: acessibilidade, html, internet, semantica, tutorial, w3c

Olá pessoal, meu nome é Wellington, Web Designer da Full Haus Comunicação, esse é meu primeiro artigo do blog, espero que gostem.

Após eu ver a palestra sobre A Semântica do HTML5: a web 3.0, exibida pelo diretor de Arte Online, Edu Agni na Campus Party 2010, resolvi abordar esse assunto que ganhou mais destaque com o desenvolvimento do novo HTML que chega definitivamente em 2011/12 em sua 5ª versão. Através desse artigo irei explicar de uma forma simples, o que é a semântica, como ela se aplica ao código de HTML e quais os benefícios de se utilizar essa técnica.

O que é Semântica?

Segundo a estudiosa Célia Maria Paula de Barros (UCB):

“A palavra “Semântica” reporta-se fundamentalmente ao verbo grego semaíno, cujo o valor é significar, seria, pois a ciência das significações.

As primeiras discussões sobre o significado remontam aos gregos. Já antes de Platão, os gregos discutiam os problemas da relação entre a palavra e o ser, entre os signos e o universo. Uma primeira doutrina elaborada de semântica e lógica se encontra nos escritos de Aristóteles. Mas as fontes continuam firmes em seus princípios históricos.

A significação do processo que associa um objeto, um ser, uma coisa, uma noção ou um acontecimento a um signo capaz de os evocar.”

O que o HTML tem haver com isso?

O HTML é essencialmente uma linguagem de marcação, que se preocupa em organizar e diagramar o conteúdo das páginas da internet, exibindo assim a informação para o usuário. Ela possui tags que tornam o entendimento das páginas pelos buscadores, browsers e até mesmo na acessibilidade de forma mais exata. Ou seja, tags que ajudam a organizar e dar significado para aquilo que está sendo proposto.

Normalmente ao escrever um texto em HTML você define, o que é parágrafo, título, links, etc.
Porém, muitas pessoas não conhecem as formas de formatar o texto de um jeito mais eficaz e inteligente através das tags e atributos. Atualmente, a formatação semântica não é algo conhecido por todos, mas para aqueles que a fazem, veem uma melhora consideravelmente boa em sua página de internet para a visibilidade e relevância em buscadores e compatibilidade de browsers, além de ajudar os deficientes visuais, através de sua acessibilidade de dizer o que é cada elemento em um texto.
Com o desenvolvimento do HTML 5 a W3C está propondo criar um código que de ainda mais significado a cada elemento. Enquanto isso não ocorre, irei aqui descrever quais tags e atributos existem que auxiliam atualmente no HTML 4 que introduz esse tipo de formatação.

OK, o que eu devo fazer?

Ao fazer o código de suas páginas em HTML, leve em conta cada elemento que irei exibir abaixo:

a – Define uma ancora para cada elemento que você queira usar no texto.

Exemplo:

(Topo)

abbr – Deve ser utilizada para destacar uma abreviação de palavra ou de um grupo de palavras.

Exemplo:

HTML, WWW.

acronym – Deve ser utilizada para destacar um acrônimo. Acrônimo, são siglas que quando pronunciadas juntas formam uma palavra, portanto não necessariamente uma abreviação é um acrônimo.

Exemplo:

FIFA , NASA

address – Essa tag deve ser utilizada em informações de endereço em um site.

Exemplo:

Rua Afonso Celso, 1221, Conj 42. – CEP: 04119-061 – São Paulo, SP

blockquote – A tag blockquote é utilizada para definir um bloco de citação, como eu fiz acima na explicação sobre semântica.

cite – Deve ser utilizada ao mostrar citações em um texto, geralmente utilizadas em frases.

Exemplo:

“No fundo do mato-virgem nasceu Macunaíma, herói da nossa gente. Era preto retinto e filho do medo da noite. Houve um momento em que silêncio foi tão grande escutando o murmurejo do Uraricoera, que a índia tapanhumas pariu uma criança feia. Essa criança é que chamaram de Macunaíma.” – Macunaíma de Mário de Andrade

code – Caso em seu texto você referencie algum código de alguma programação, você deve colocar ele entre essa tag.

Exemplo:
echo ("Hello world"); ?>

dfn – Serve para dar destaque a um termo que o seu significado vem logo após ele.

Exemplo:

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Fonte: Wikipedia

div, span – DIV e SPAN são utilizados para estruturar os elementos, sendo o DIV para estruturar um bloco através do CSS e o SPAN uma linha.

dl, dd, dt – Essas tags são utilizadas para definir uma lista de termos e significados, sendo o DL para definir a lista, o DT a palavra chave e o DD a explicação do termo.

Geralmente esses elementos são utilizados em glossários e dicionários.

Exemplo:

@ (at ou arroba): significa “em”, antecedendo o local (provedor ou domínio próprio) onde suas caixas postais estão hospedadas. Ex: internauta@dominio.com.br.
Ad: é um gráfico ou um banner de uma página web que, quando clicado, leva o internauta a outro website.
Ad Click: é o ato de clicar em um ad.
Ad View: é a página que mostra o ad. Podem ser mostrados um ou vários “ads” em um mesmo “ad view”.
Alias: é um nome alternativo (para uma URL, e-mail, arquivo ou variável, por exemplo).

Fonte: AISA

del, ins – A tag INS é utilizada para mostrar em um texto algum elemento que foi adicionado após ele ter sido colocado no ar e a tag DEL, algum trecho que foi deletado ou alterado do texto original. Geralmente essa tag é utilizada em blogs ao corrigir posts que foram encontrados erros ou que a informação de um post foi atualizada.

Exemplo:

~~O sorteio da camiseta será às 18hs do dia 02/02/2010.~~ O sorteio da camiseta será às 18hs do dia 03/02/2010.

em – A tag EM serve para dar ênfase em ítalico, em alguma palavra ou trecho de um texto. Ao contrário da tag U que é somente visual.

Exemplo:

O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.

h1 .. h6 – A tag de H1 a H6 definem quais são os títulos e sua relevância em um texto, sendo o H1 o mais relevante e o H6 o menos relevante.

Exemplo:

Esse é o título H1.

Esse é o título H2.

Esse é o título H3.

Esse é o título H4.

Esse é o título H5.

Esse é o título H6.

ul, ol, li – A tag LI, serve para definir uma lista de elementos. Sendo a tag OL para criar uma lista com elementos organizados por alguma ordem. E a UL organizando os elementos sem necessariamente possuirem uma ordem.

Exemplo:

Termos mais buscados (Por ordem de relevância):

Web
Internet
Cloud TAG
Blog
Tecnologia

Produtos vendidos:

Camisetas
Calças
Sapatos
Tênis
Blusas

p – Define o que é um parágrafo.

Exemplo:

Campus Party é considerado o maior evento de inovação tecnológica, Internet e entretenimento eletrônico em rede do mundo. Um encontro anual realizado desde 1997, que reúne, durante sete dias, milhares de participantes com seus computadores com a finalidade de compartilhar conhecimento, trocar experiências e realizar todo o tipo de atividades relacionadas a computadores, às comunicações e às novas tecnologias.

Fonte: Campus Party

pre – A tag PRE preserva a quebra de linha e os espaços em branco utilizados nos textos, sem necessariamente ter que escrever as tags BR e o caracter especial de espaço.

Exemplo:

body{
   font-family: Arial, Verdana, sans-serif;
   background-color: #FFF;
   margin: 5px 10px;
}

q – Essa tag serve para definir uma citação que utiliza apenas 1 linha, diferente da tag BLOCKQUOTE que é um parágrafo ou mais.

Exemplo:

Aja antes de falar e, portanto, fale de acordo com os seus atos. – Confúcio

strong – Define um destaque assim como a tag EM, mas no caso em negrito. Ao contrário da tag B que é somente visual.

Exemplo:

Só serão aceitas as respostas que foram enviadas até as 17hrs do dia 01/02/2010.

var – Indica um elemento de váriavel em um código.

Exemplo:

Código:

<code>if (document.getElementById) blnDOM = true;</code>

Elemento exibido:

if (document.getElementById) blnDOM = true;

Além das TAGS do HTML, outra forma de tornar o HTML ainda mais semântico são os atributos das próprias TAGS:

alt – O atributo ALT, é utilizada para colocar uma descrição em imagens, além de auxiliar na busca, ela substitui a imagem pela a palavra caso a mesma não consegue ser exibida.

cite – O atributo CITE, é utilizado nas tags de citações, nesse atributo você especifica qual é o link que foi retirado o trecho citado no texto, não sendo exibido para o usuário final no browser, mas somente para organização e referência no código.

class – Com o atributo CLASS, você escolhe qual classe o elemento selecionado possuí no CSS.

id – Com o atributo ID, você nomeia o objeto com um nome único, ajudando na organização e podendo ser utilizado para formatação em CSS específicas para o objeto nomeado.

lang – Com esse atributo você diz qual linguagem o texto possui, auxiliando os buscadores na hora de especificar em qual linguagem deve dar enfase para exibição.

longdesc – Com o atributo LONGDESC, você adiciona a imagem, um link a sua escolha que vai para alguma página que complemente a informação da imagem. Diferente de utilizar a tag A o LONGDESC é específico para a imagem.

rel – Quando adicionado o atributo REL na tag LINK você específica qual tipo de conteúdo o usuário irá encontrar quando clicar nele, não sendo visível para o usuário final, é somente utilizado pelos buscadores na hora da indexação de uma página. Pode ser também utilizado com a tag A.

rev – Ao contrário da tag REL, a tag REV descreve qual é a relação da página que o LINK possuí com a que você está escrevendo.

title – Com o atributo TITLE você adiciona às imagens, citações, abreviações e acrônimos o título que ela possuí, ou algo que se releciona a ela que é exibida quando o usuário passa o cursor em cima.

Além desses atributos e tags descritas existem outras, e com o HTML 5 ainda mais, sendo essas descritas por mim as principais, caso queiram saber mais sobre eu recomendo uma visita ao site da W3C e ler mais sobre os elementos (TAGS) e sobre os atributos existentes.

Finalizando…

Através do código HTML semântico é possível trazer benefícios para os usuários, quanto mais pessoas aderirem a formatação semântica do código, melhor será no futuro os buscadores e seus resultados, trazendo cada vez mais informações relevantes e organizadas.

Com o desenvolvimento do HTML 5 nos próximos anos e mais tags semânticas sendo criadas isso está cada vez mais próximo. Mesmo ocorrendo a adoção ao HTML5 aos poucos, nós podemos hoje em dia, utilizar a formatação atual, que foi descrita acima para as páginas web.

Bom, é isso por hoje.

Qualquer dúvida caso alguém tenha, eu respondo nos comentários.

Até a próxima!

Compartilhe: