20 de dezembro de 2010 Artigos

Introdução a Microdata no HTML5

De forma similar aos microformats, microdata do HTML5 permite representar determinadas informações de forma mais semântica.

Por Talita Pagani

Provavelmente você já ouviu falar de microformats, um padrão que permite representar informações de modo mais semântico no XHTML, como, por exemplo, informações de contato (hCard) ou dados de um evento (hCalendar).

No HTML5, temos o microdata, conceito semelhante aos microformats e RDFa, um padrão de representação de informações que estende as potencialidades semânticas do HTML5.

As informações representadas através de microdata utilizam elementos pertencentes a um vocabulário específico que deve ser referenciado no documento HTML. O vocabulário é a especificação das propriedades utilizadas e qual tipo de informação elas representam.

Atualmente, vocabulários de microdata podem ser encontrados no site http://www.data-vocabulary.org/, contendo especificações para descrever eventos, empresas, pessoa, produto e até breadcrumbs (caminhos de navegação de um site). No site podem ser encontradas as propriedades referentes a cada especificação e uma descrição de finalidade e utilização.

Ao utilizar este tipo de padrão para descrição de dados, você possibilita que mecanismos de busca entendam estas informações dentro do contexto semântico definido e facilita a outras aplicações reconhecer e importar estes dados de seu site. E isto não é uma projeção para o futuro, o mecanismo de busca do Google já reconhece microdata e possui artigos no Help Center do Webmasters Tools, portanto, já pode ser utilizado.

Como utilizar microdata no HTML5

Primeiro é preciso determinar uma tag que será o escopo do microdata, ou seja, será o elemento que contém as informações. Para isso, essa tag deve possuir a propriedade itemscope e também a propriedade itemtype com o valor indicando o vocabulário de microdata a ser utilizado para que o mecanismo de busca saiba que tipo de informação irá encontrar dentro das tags deste elemento.

Vamos exemplificar que desejamos exibir um microdata com informações de uma organização. Primeiro definimos uma div como escopo:

[cc lang="html" line="1" escaped="true"]

[/cc]

As tags que estarão dentro desta div devem conter a propriedade itemprop para identificar qual elemento (propriedade) aquela tag estará representando. No caso do vocabulário Organization temos elementos como name (nome da empresa), tel (telefone), geo (coordenadas geográficas como latitude e longitude), entre outras. Também é possível adicionar microdata aninhado, ou seja, outro vocabulário microdata para detalhar alguma informação.

Neste exemplo, além das propriedades do vocabulário Organization, iremos também utilizar de modo aninhado o microdata Address, especificando detalhes do endereço.

[cc lang="html" line="1" escaped="true"]

[/cc]

Utilizar tecnologias como microdata, microformarts ou RDFa só vem a enriquecer as informações que podem ser oferecidas em páginas HTML e ajudar a construir uma web mais semântica.

Saiba mais sobre microdata no artigo Microdata: HTML5’s Best-Kept Secret.