Microdata

Microdata is part of the HTML5 standard. You can find the specification here:

http://www.w3.org/TR/html5/microdata.html

The Microdata specification is specifying some attributes and keywords to mark semantic data / semantic information in HTML5 pages. Usually in a WebApplication the HTML pages are generated out of structured data, for example out of a SQL Database. In a HTML page the semantic data is mixed with HTML markup tags. That makes it for Crawlers difficult to extract the real meaning/information.

With Microdata you can add semantic meanings to some html tags. Let’s say you have a HTML page with movies. And one movie is described like this:

<div >
  <h1 >Avatar</h1>
  <span>Director: <span >James Cameron</span> (born August 16, 1954)</span>
  <span >Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

By adding some Microdata attributes you can add semantic meaning to the HTML page.

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

with the attribute “itemscope” you are marking a special context. With “itemtype” you can specify a context type. At http://schema.org there are some predefined types. This types are recognized by the Google Crawler, too.

With “itemprop” you can specify a property in a context. For example “name” or “director”. You can choose the value of the itemprop free. The text value of the html tag is the value of the itemprop.

With Microformats you can help the Search Engines to understand better the semantic meaning of your page. It is powerful tool for SEO.

Microformats

Microformats are a little bit older than Microdata. With Microformats you can add semantic meaning to your HTML page, too. But instead with attributes it works with css classes. There are different problems with that approach, because it is a wrong-use of CSS. I really recommend to go with Microdata instead of Microformats.