HTML 5: Microdata

HTML 5 continues to amaze us with its capabilities. Here is another one.

One of the features that we added to HTML5 is the ability to include annotations so that people can get data in a simple and specific way. This means that if your site wants to make information available, you will not need to rely on other imperfect data acquisition mechanisms.

Suppose you are working with an indentor tracker such as Bugzilla , and you need additional tools to get information about instances from the database.
Now, Bugzilla creates an XML file for each error, which means that two parallel data formats are generated for the error page. Instead of doing this separation, you can use microdata — new HTML5 attributes. Thus, when tracking changes in the interface from version to version, the basic error data is displayed on the same HTML page.
The markup looks like this now:

< body >
< h1 > Issue 12941: Too many pies in the pie factory </ h1 >
< dl >
< dt > Reporter </ dt >
< dd > ian@hixie.ch </ dd >
< dt > Priority </ dt >
< dd > AAA </ dd >
...

To explain how to work with microdata, we create some attributes and then assign a value to each field with these attributes. These are attributes in the "reverse-DNS" form; if there is an error on “example.net”, then the attributes will be “net.example.bug”, “net.example.number”, and so on. Thus, we get:

< body item ="net.example.bug" >
< h1 > Issue < span itemprop ="net.example.number" > 12941 </ span > :
< span itemprop ="net.example.title" > Too many pies in the pie factory </ span ></ h1 >
< dl >
< dt > Reporter </ dt >
< dd itemprop ="net.example.reporter" > ian@hixie.ch </ dd >
< dt > Priority </ dt >
< dd itemprop ="net.example.priority" > AAA </ dd >
...

The item attribute = "net.example.bug" indicates: "this is an error." The various itemprop attributes form a name / value pair for the error. The snippet above is the result of the following data tree:

net.example.bug:
net.example.number = "12941"
net.example.title = "Too many pies in the pie factory"
net.example.reporter = "ian@hixie.ch"
net.example.priority = "AAA"


Now, in the case of a cardinal change of the page, the error data is clearly available:

< body >
< h1 > Example.Net Bugs Database </ h1 >
< section item ="net.example.bug" >
< h1 itemprop ="net.example.title" > Too many pies in the pie factory </ span ></ h1 >
< p > # < span itemprop ="net.example.number" > 12941 </ span > ; reported
by < span itemprop ="net.example.reporter" > ian@hixie.ch </ span > . </ p >
< p > PRIORITY: < strong itemprop ="net.example.priority" > AAA </ strong > . </ p >
...

This concludes a brief introduction to microdata! Some future articles will describe several aspects of microdata, which I did not discuss here:
• How to describe the URL, date and time, hidden data using microdata.
• How to make one element inside another.
• How to describe an object of more than one type or how to give a single value for several attributes.
• How to define in advance dictionaries.
• How to add a description outside item = "" using subject = "".

Additionally:

Microdata Extractor for HTML 5
Microdata Specification
* This source code was highlighted with Source Code Highlighter .
Special thanks to XaocCPS for some translation adjustments.