<
Menu

Tableless



Introdução a Microdata no HTML5

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

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:

<div itemscope itemtype="http://data-vocabulary.org/Organization">
</div>

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.

<div itemscope itemtype="http://data-vocabulary.org/Organization">
    <h1 itemprop="name">Tableless – Treinamento e Desenvolvimento Web</h1>
    <p itemprop="tel">11 9999-9999</p>
    <p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">Rua do Tableless, 232</span>,
      <span itemprop="locality">São Paulo</span>,
      <span itemprop="region">SP</span>.
    </p>
</div>

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.

Por Talita Pagani

Talita Pagani, 25 anos, mora em Bauru, interior de SP. Atualmente é Analista de Testes na MStech, atuando com projetos educacionais. Também trabalha como web designer desde 2005, mas começou a se interessar pela área em 2001. É graduada em Ciência da Computação e pós-graduanda em Gerenciamento de Projetos. Apaixonada por usabilidade, design de interface e padrões web.

http://www.twitter.com/talitapagani

Mais posts do autor

Comentários (17)

  • Pingback: Tweets that mention Introdução a Microdata no HTML5 | Tableless - Desenvolvimento com Padrões Web -- Topsy.com

  • http://www.tkp.com.br/ Thiago

    To procurando um artigo assim faz tempo, porem tudo que vejo é somente do hCard e hCalendar e a galera não utiliza o Data-Vocabulary e muito menos as tag (itemscope e itemprop).

    Para tal gostaria de saber até onde é relevante utilizar os microformats, pois se a intenção é deixar o código mais semântico para os buscadores sendo que eles mesmos ainda não reconhecem e não dão uma certa relevância para os microformats.

  • http://www.twitter.com/talitapagani Talita Pagani

    Oi Thiago,

    O microformat é diferente do microdata. No microformat, a especificação não é feita pelo data vocabulary, e sim pelo microformats.org e também não são utilizadas as propriedades mencionadas no artigo. O microdata tem o mesmo propósito do microformat, mas é específico para o HTML5. O hCard e hCalendar são especificações de microformats, não microdata.

    Tanto os microformats quanto o microdata já são reconhecidos por mecanismos de busca, pelo menos o Google. No Webmaster Tools, eles têm uma seção “Como criar sites amigáveis ao Google” que fala sobre os microformats e microdata e foi mencionado no artigo também.

    Abraços

  • http://www.jusbrasil.com.br Shankar Cabus

    Talita, até que ponto devemos usar o HTML5 atualmente?
    Visto que, infelizmente, o IE6-8 ainda não oferece suporte à nova marcação, devemos usar o XHTML e aproveitar pelo menos a semântica das tags do HTML5?

    Sabemos que a dupla CSS3 + HTML5 veio pra mudar completamente a forma de desenvolvimento web e, espero, destruir o FLASH de vez. Mas e até lá, como lhe dar com os problemas de compatibilidade? Ao CSS3 encontramos alternativas, como o CSS3 PIE, mas e pro HTML5?

    []‘s

  • Carlos Eduardo

    Também acho interessante sabermos que o padrão existe e que no futuro podemos utilizá-lo.
    Mas atualmente o que temos de mais viável são os Microformats, por serem de fácil aprendizado e não requererem nenhum suporte específico dos browsers.

    O Google já oferece algum suporte a Microdata, mas como a definição do HTML5 não está fechada, não é muito seguro usá-lo…

  • Capi Etheriel

    Qual a diferença entre o modelo proposto pelo HTML5 microdata e o RDFa? Existe algo de comum entre eles?

  • http://www.twitter.com/talitapagani Talita Pagani

    Shankar, não podemos usar o XHTML com as tags do HTML5, pois um documento XHTML tem um doctype específico. O caminho é inverso, utilizar HTML5 com as regras de sintaxe do XHTML (toda tag deve ter fechamento, tags com letras minúsculas, etc.). É o que o pessoal tem chamado de XHTML5.

    Para o HTML5, há alguns scripts que permitem que as tags HTML5 sejam reconhecidas nos IEs.

    As opiniões sobre usar ou não o HTML5 ainda são muito divergentes, há prós e contras. Eu acredito que dependerá da viabilidade no projeto e do estudo do público-alvo que irá acessar o site. No meu site pessoal, eu utilizei HTML5, mas em projetos de sites corporativos ainda tenho utilizado o XHTML.

    Abraços.

  • http://www.twitter.com/talitapagani Talita Pagani

    O RDFa tem uma implementação semelhante ao do microdata, mas a princípio ele foi proposto para ser utilizado com o XHTML 2, por conter uma sintaxe mais próxima do XML, porém o XHTML 2 será descontinuado. Me parece também que o RDFa é um pouco mais complexo para utilizar do que o microdata e o microformat e isso acaba tornando-o menos popular do que outras especificações.

  • http://twitter.com/jardel_xavier Jardel Xavier

    Concordo com suas colocações a utilização destas tecnologias ajudam em muito a deixar o código cada vez mais semântico. Parabéns pelo Artigo!

  • Hugo Fabricio

    Alguem sabe onde encontro informações sobre o microdata para listagem de notícias?

  • Pingback: HTML 5, novos elementos e atributos. | Tableless - Desenvolvimento com Padrões Web

  • bruce

    Legal eu trabalho com web tbm estou me especializano em html5 agora estou gostando eu estudo computação gráfica :)

  • Pingback: Website e Blog da Cocento no ar! | Cocento Tecnologia Blog

  • http://twitter.com/thiagoanjos thiago dos Anjos

    Talita, tudo bem?

    Estou trabalhando em um projeto que tentei implementar a api de microdata do html5, mas o w3c não está mais validando, pelo menos desde o dia 14 de janeiro de 2012 começou a dar erros. Busquei mais informações, mas por enquanto ninguém tem informações mais precisas porque a microdata não passa nos testes da http://validator.w3.org na especificação HTML5.

    Vocês sabem de alguma coisa? Abraços.

  • Pingback: Aumente seu CTR com Schema.org | SEO Master

  • Pingback: Microdados do HTML5 | Tableless

  • Pingback: Drops 13 - O basico sobre semântica, HTML5 e microdata - Tableless