Microdata (HTML)

HTML
HTML and HTML5 Dynamic HTML XHTML XHTML Mobile Profile and C-HTML Canvas element Character encodings Document Object Model Font family HTML editor HTML element HTML Frames HTML5 video HTML scripting Web browser engine Quirks mode Style sheets Unicode and HTML W3C and WHATWG Web colors Web Storage Comparison of document markup languages web browsers layout engines for HTML HTML5 HTML5 Canvas HTML5 Media Non-standard HTML XHTML (1.1)
This box: view · talk · edit

Microdata is a WHATWG HTML specification used to nest semantics within existing content on web pages.^[1] Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users. Microdata use a supporting vocabulary to describe an item and name-value pairs to assign values to its properties.^[2] Microdata helps technologies such as search engines and web crawlers better understand what information is contained in a web page, providing better search results. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine readable tags than the similar approaches of using RDFa and Microformats.

Microdata Vocabularies

Microdata vocabularies provide the semantics, or meaning of an Item. Web developers can design a custom vocabulary or use vocabularies available on the web. A collection of commonly used (and Google Supported^[3]) Microdata vocabularies located at http://data-vocabulary.org which include: Person, Event, Organization, Product, Review, Review-aggregate, Breadcrumb, Offer, Offer-aggregate. Other markup vocabularies are provided by Schema.org schemas. Major search engines rely on this markup to improve search results. For some purposes, an ad-hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.^[1]

Microdata Global Attributes

• itemscope – Creates the Item and indicates that descendants of this element contain information about it.^[1]
• itemtype – A valid URL of a vocabulary that describes the item and its properties context.
• itemid – Indicates a unique identifier of the item.
• itemprop – Indicates that its containing tag holds the value of the specified item property. The properties name and value context are described by the items vocabulary. Properties values usually consist of string values, but can also use URLs using the a element and its href attribute, the img element and its src attribute, or other elements that link to or embed external resources.^[1]
• itemref – Properties that are not descendants of the element with the itemscope attribute can be associated with the item using this attribute. Provides a list of id's of elements with additional properties elsewhere in the document.^[1]

Example

The following markup may be found on a typical about page containing information about a person:

<section> Hello, my name is John Doe, I am a graduate research assistant at the University of Dreams. My friends call me Johnny. 
You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>. I live at 1234 Peach Drive Warner Robins, Georgia.</section>

Here is the same markup with added Microdata:

<section itemscope itemtype="http://data-vocabulary.org/Person"> 
        Hello, my name is 
        <span itemprop="name">John Doe</span>, 
        I am a 
        <span itemprop="title">graduate research assistant</span> 
        at the 
        <span itemprop="affiliation">University of Dreams</span>. 
        My friends call me 
        <span itemprop="nickname">Johnny</span>. 
        You can visit my homepage at 
        <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>. 
        <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                I live at 
                <span itemprop="street-address">1234 Peach Drive</span> 
                <span itemprop="locality">Warner Robins</span>
                , 
                <span itemprop="region">Georgia</span>.
        </section>
</section>

As the above example shows, Microdata items can be nested. In this case an item of type http://data-vocabulary.org/Address is nested inside an item of type http://data-vocabulary.org/Person.

The following text shows how Google parses the Microdata from the above example code. Developers can test pages containing Microdata using Google's Rich Snippet Testing Tool.^[3]

Item
   Type: http://data-vocabulary.org/Person
   name = John Doe
   title = graduate research assistant
   affiliation = University of Dreams
   nickname = Johnny
   url = http://www.johnnyd.com/
   address = Item(1)
Item 1
   Type: http://data-vocabulary.org/Address
   street-address = 1234 Peach Drive
   locality = Warner Robins
   region = Georgia

Support

Google can^{[clarification needed]} use microdata in its result pages.^[3]

Currently, no stable release of a browser supports the Microdata DOM API, but the upcoming Opera 12 does.^[4]

MicrodataJS^[5] is a JavaScript library and jQuery plugin that emulates the DOM API.

See also

• Schema.org
• Semantic web
• Microformat
• RDFa

Earlier related work

• Semantic HTML
• Plain Old Semantic HTML

References

1. ^ ^{a b c d e} Microdata — HTML5 Draft Standard
2. ^ “Distributed,” “Extensibility,” And Other Fancy Words, Dive Into HTML5
3. ^ ^{a b c} Rich snippets (microdata, microformats, RDFa), Google webmaster central
4. ^ Introducing Opera “Wahoo”
5. ^ MicrodataJS

External links

• Microdata — HTML5 Draft Standard, WHATWG, http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata 
• Usability testing HTML5, 2009-10-04, http://blog.whatwg.org/usability-testing-html5 , about how some of the design decisions for microdata were made
• Almaer, Dion (2009-05-11), Hixie discusses the addition of HTML5 “microdata”, Ajaxian, http://ajaxian.com/archives/hixie-discusses-the-addition-of-html5-microdata 
• HTML5 Microdata Specs, Data-Vocabulary.org, http://www.data-vocabulary.org 
• Live Microdata, a tool to interactively edit and extract the Microdata embedded in HTML