Microdata

Microdata defines five HTML attributes that can be applied to any HTML5 tag. Most developers will only ever use itemscope, itemtype and itemprop. Itemref and itemid aren’t necessary to get up and running with microdata and aren’t needed by the most common formats.

• Itemscope - Indicates the element is a microdata element and its child elements are part of its microdata format.
• Itemtype - Defines the vocabulary to be used by the microdata format.
• Itemid - The unique identifier of the item, if defined by the microdata vocabulary.
• Itemprop - An individual data element.
• Itemref - Allows a microdata element to reference another element on the page to define it by either HTML id or by itemid.

Itemscope and itemtype

The itemscope attribute us used to indicate that the element it is placed on and it’s children represent a microdata item. The itemscope should be paired with an itemtype attribute that defines the microdata vocabulary in use.

... Additional data ...

Microdata vocabularies can be nested and can be dependent on one another. For example, the organization microdata vocabulary also contains an address as a member.

The itemtype url can point to anything. Think of it as just a unique character string that various programs have agreed that when they see that specific ID, they know how to parse and look for the itemprop tags in the sub-elements to extract the meaning needed from the document.

Putting it together: Update your "Contact Us" page today

Every business’ web site has a contact us page. These pages serve two main purposes. First, when someone is on your web site and wants to contact you, this page is a page they can navigate to and use to find out how to get in touch with your business. Second, this page is processed by google and other bots to understand what business this web site belongs to, where to plot it on a map and other information that helps it put your business in context. You could rely on Google’s sophisticated algorithms for deriving this information from unstructured data on your web page but you can’t be certain they won’t list your fax number as your phone number or confusing your company’s product with your company’s name. It’s far better and more reliable to mark up this information in your page itself to insure the right data goes in the right fields.

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
<h2 itemprop="name">Legendary Code</h2>
Always on the move! This text will be displayed on the web page but won’t be machine processed because its parent tag doesn’t have a specific itemprop. 
<div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">E Capitol St NE & 1st St</span>, 
<span itemprop="locality">Washington</span>, 
<span itemprop="region">DC</span> 
<span itemprop="postal-code">20002</span>
</div>
<span itemprop="geo" itemscope 
itemtype="http://www.data-vocabulary.org/Geo/"
style="display:none"><!—Don’t display in UI-->
    <span itemprop="latitude">38.5323 N</span>  
    <span itemprop="longitude">77.0040 W</span>  
</span>  
Call us at: <span itemprop="tel">555-555-5555</span>
<div>
<a href="http://www.legendarycode.com" itemprop="url"> http://www.legendarycode.com</a>
</div>
</div>