HTML 5: Microdata

Original author: The WHATWG Contributors
  • Transfer
image
HTML 5 continues to amaze us with its capabilities. Here is another one.

One of the features we added in 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 extraneous imperfect mechanisms for obtaining data.

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

Issue 12941: Too many pies in the pie factory



 
Reporter

 
ian@hixie.ch

 
Priority

 
AAA

 ...

To clarify the 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:

Issue 12941:
 Too many pies in the pie factory



 
Reporter

 
ian@hixie.ch

 
Priority

 
AAA

 ...

The item = "net.example.bug" attribute 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 event of a fundamental change in the page, the same error data is clearly available:

Example.Net Bugs Database



 

Too many pies in the pie factory


 

#12941; reported
 by ian@hixie.ch.


 

PRIORITY: AAA.


 ...

This concludes the brief introduction to microdata! Some future articles will describe several aspects of microdata that I did not discuss here:
• How to describe 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 predefine 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.

Also popular now: