Web Developer Tutorial: HTML5 Microdata

By David Talbot

The HTML5 draft specification includes Microdata. The Microdata spec provides a standardized syntax for additional semantic markup to your web pages to enhance the machine readability of your web pages. It’s purpose isn’t to make a new widget appear on your web page but to help automated programs like google understand and better handle the content of your web pages.

HTML5 Microdata has the same basic mission as RDFa and Microformats but differs slightly in implementation and use. HTML5 microdata allows you at add structured markup to any HTML element that is bot-readable, standardized and won’t cause any problems with browsers that don’t support it. As browsers add real support for HTML5 microdata, you will see an explosion of tools to enable faster data entry, collection and better accessibility options for people with disabilities.

RDFa is an XML namespace that allows you to add semantic markup to XHTML pages. Unfortunately, using RDFa necessitates using XHTML syntax which has gone over like a lead balloon with the web development community.

Microformats are a “hack” of sorts centering around using known CSS class names to mark up the semantic structure of an HTML document without losing browser compatibility. This approach is acceptable but is by nature requiring a certain amount of co-mingling of your model and presentation.

Overview

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.

<p itemscope itemtype="http://www.data-vocabulary.org/Organization/"> ... Additional data ... </p>

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.

Common Microdata Formats

You can define any itemtype you want for consumption by your organizations internal automated bots but the value of microdata comes from multiple organizations agreeing to use the same vocabulary. In this case, the most immediate benefit for web developers is to use the microdata formats supported by Google’s crawlers to feed better, richer data to Google. The clear benefit is the better Google understands your organization, the richer Google’s search results will be for your site.

Google’s currently supported microdata formats can be found at http://www.google.com/support/webmasters/bin/topic.py?topic=21997.

  • Breadcrumbs – Defines where a given page is in the overall structure of a site.
  • Businesses and Organizations – Defines corporate structure and related contact information.
  • Events – Calendar data.
  • Product Information – Defines product catalog data.
  • People – Information about people including contact information.
  • Recipes - Defines a cooking recipe, nutrition values, ingredients and instructions.
  • Reviews and ratings – A common interchange format describing reviews and ratings.

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>

Conclusion

HTML5 microdata is an unobtrusive way to add semantic markup to your existing web pages without having to resort to browser breaking syntax while getting your pages ready for future browsers that will be able to interact with your pages in ever richer ways.


David Talbot has over 14 years of experience in the software industry with experience ranging from license plate recognition using neural networks to television set-top boxes to highly scalable web applications. His main focus is building rich user interface web applications on the .NET platform. He is also the author of Applied ADO.NET and numerous articles on technology.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •