Tableless

Busca Menu

HTML 5 – Semântica e o que é importante na web

Seja o primeiro a comentar por

O HTML é a primeira camada do desenvolvimento client-side. Como você sabe, existem 3: a primeira que é a informação, que é o HTML que vai exibi-la na página. A segunda é o CSS, que vai formatar esse HTML de forma que fique legível, usável, bonito. E a terceira que vai definir o comportamento desses elementos, que é o Javascript e Ajax.
Deles o HTML é mais importante. É o HTML que cuida da exibição da formatação. É ele que serve os buscadores e leitores de tela. É ele que serve a informação para aplicações e te dão toda a informação que você busca na web todos os dias.

Hoje em dia, a maioria dessa informação tem significado. Leitores de tela e o Google conseguem distinguir o que é um título, parágrafo, ênfase, listas, etc… Mas como eles sabem o que é um telefone? Ah, sim, fazendo microformatos. Mas microformatos é uma tecnologia que veio para tapar um buraco de semântica do HTML. E esse é um assunto interessante.

Na nova versão do HTML, a 5, o pessoal do W3C está estudando novas formas de inserir significado no HTML. Hoje, só o básico é feito. Você define o que é título, parágrafo, links, endereços, e só. Com algum microformato, você consegue definir um contato, localização e outras informações.

Abaixo, segue uma lista de alguns elementos que podemos utilizar no nosso dia-a-dia para trazer mais significado para a informação dos seus sites:

a
Define a ancora de um elemento.
abbr
Define uma abreviação.
acronym
Indica um acrônimo.
address
A tag address é utilizada para conter informações de endereço e contatos.
blockquote
Blockquote define longos blocos de citação.
cite
Define uma citação ou referência a outra fonte
code
Define que aquele texto é um código.
dfn
Define que certo texto é a definição de um termo.
div, span
Div e Span definem a estrutura dos elementos. Div é um elemento de bloco e Span um elemento de linha.
dl, dd, dt
Listas de definição são feitas para criar um grupo de termos e definições. Muito usada para fazer glossários, dicionários ou entrevistas textuais.
del, ins
INS é utilizado para mostrar que certo texto foi inserido e DEL define o texto que foi deletado da redação. Isso é bastante utilizado para corrigir artigos, textos e etc.
em
Como o strong, indica uma ênfase no texto.
h1 .. h6
Grupo de títulos definidos por importância, onde o H1 é o mais importante e o H6 o menos importante.
ul, ol, li
Listas ordenadas (OL) e listas não ordenadas (UL) são utilizadas para definir e criar listas de itens.
p
Define um parágrafo.
q
Define uma citação ou reposta que não necessita de quebra de linha ou marcação de um parágrafo.
strong
Define uma ênfase, como o EM.
var
Indica uma instância de uma variavel ou argumento de programa.

Além dessas tags, podemos também trabalhar com a semântica com atributos. Alguns deles: Alt, Title, classe, cite, id, lang, longdesc, rev, rel.
Tudo isso traz mais significado ao HTML. Mas ainda não é o bastante.

Como o John Allsopp disse em seu artigo no A List a Part. Nós precisamos de tipos de mecanismos no HTML, que solucionem a necessidade dos desenvolvedores de enriquecer as informações exibidas no HTML dando significado inteligentes para os elementos. Essa é a verdadeira meta do HTML 5.

Infelizmente a adoção do HTML 5 não é tão simples assim. Temos que lembrar da regra Don´t Break the Web. Esse suporte deve ser leve, caso contrários, browsers como o Internet Explorer 6 ou 7 podem sofrer com a falta de compatibilidade com as novas características.

Publicado no dia