Blog

The HTML5 Family: Microdata Overview

July 06, 2010 | Jay Robinson

The Web is, and has always been, about sharing data. When data can be processed, organized, structured or presented in a given context so as to make them useful, they become powerful information. Microdata, a part of the HTML5 Family, is a way of embedding information in your web page that provides machine-readable context to your existing plain data.

Give your web app more context by adding Microdata. Here are a few examples:

• You can mark up the date of an event, so a browser can automatically offer to add it to a visitor's calendar.
• You can mark up your contact information, so a browser can automatically offer to add it to a visitor's address book.
• You can mark up a restaurant review on your blog, so search engines can find it, associate it with the correct restaurant, and show it when people search for that restaurant.
• You can mark up your resume, so that when you use a site like LinkedIn, you can just point it at your resume page and it can automatically extract all the information that it needs.
• You can mark up a recipe, so a user's shopping-list app can discover what ingredients are needed and add them to that week's shopping list.

All of this is possible with a few extra attributes and the evolution of Microformats as standardized in Microdata.

How To Implement Microdata

The Microdata DOM API is incredibly straightforward and requires only two attributes: itemscope and itemprop.

Each "item", designated on the container element with itemscope acts as a wrapper for the child elements marked with named properties, or itemprop. The value for each property is detected automatically based on the element.

If itemprop appears on a:

<a>, <area>, <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, or <video> element

The data is the url in the element's href, src, or data attribute, as appropriate. For example, an image element inside a container of personal contact information can be recognized as that person's photo and downloaded accordingly.

<time> element

The data is the time in the element's datetime attribute. This lets you, for example, just say "last week" in your text content but still indicate exact date and time.

<meta> element

The data is whatever appears in the content attribute of the <meta> element. This is used when you need to include some data that isn't actually in the text of your page.

anything else

The data is whatever is in the text of the element.

Here is an example of a product review, marked up with Microdata:

<div itemscope>
    <strong itemprop="product">A Great Product</strong>
    <span itemprop="rating">5/5</span>
    <p itemprop="review">This product is very nice. I especially love feature X and Y.</p>
</div>

Extracting the Data

That's really all there is to it. The container element gets an itemscope attribute and relevant elements within provide a simple combination of properties and values. A machine can now parse and target all the Microdata. For example, the Microdata in the previous example would look like this in JSON:

{
  "items": [
    {
      "properties": {
        "product": [
          "A Great Product"
        ],
        "rating": [
          "5/5"
        ],
        "review": [
          "This product is very nice. I especially love feature X and Y."
        ]
      }
    }
  ]
}

Conclusion

If your markup is already as semantic as possible, then your transition should be totally painless. The Microdata API promises a simple standard to replace the din of Microformats and RDFa. Not everyone believes that Microdata makes RDFa obsolete, and you can read a different opinion about whether or not it should replace RDFa (in the spec itself.)

Microdata exists as a simple, powerful API today because of strong community support from its predecessor, Microformats, created by people who cared passionately about semantic markup. The way forward is for app creators and browser vendors to leverage the added context enabled by Microdata to push the limits of user and macine interaction with websites and data, creating new possibilities for the Web.