“Distributed,”“Extensibility,”& Other Fancy Words

1.   Microdata annotates the DOM with scoped name/value pairs from custom vocabularies. Anyone can define a microdata vocabulary and start embedding custom properties in their own web pages. Microdata works with name/value pairs. Every microdata vocabulary defines a set of named properties. Along with named properties, microdata relies heavily on the concept of “scoping.” Microdata re-uses the hierarchical structure of the DOM itself to provide a way to say “all the properties within this element are taken from this vocabulary.” You can even nest microdata vocabularies within other vocabularies, all by re-using the natural structure of the DOM. Microdata is a complement to HTML and works best for fine-tuning the semantics of data that’s already in the DOM, but the HTML vocabulary isn’t quite expressive enough. If the data you’re semanti-fying isn’t in the DOM, you should step back and re-evaluate whether microdata is the right solution.

 

 

2.   To define your own microdata vocabulary, first, you need a namespace, which is just a URL. The namespace URL could actually point to a working web page, although that’s not strictly required. A microdata property name is always declared on an HTML element. The corresponding property value is then taken from the element’s DOM. For most HTML elements, the property value is simply the text content of the element. But there are a handful of exceptions:

“Text content” doesn’t mean “all the markup inside this element” (like you would get with, say, the innerHTML DOM property). It means “just the text”.

 

3.   “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have. The first thing you always do is declare which microdata vocabulary you’re using, by adding an itemtype attribute. The second thing you always do is declare the scope of the vocabulary, using an itemscope attribute:

 

<section itemscope itemtype="http://data-vocabulary.org/Person">

        <h1 itemprop="name">Mark Pilgrim</h1>

       … 

 

     In English, this says “here is the name property of the http://data-vocabulary.org/Person vocabulary, and the value of the property is Mark Pilgrim.”

 

4.   It’s a best practice to put your documentation about the microdata vocabulary on the vocabulary URL itself.

 

5.   Microdata doesn’t have a way to break up runs of text into separate properties. You can’t say “the first 18 characters of this text is one microdata property, and the last 12 characters of this text is another microdata property.”

 

6.   A microdata property itself can be a microdata item. That means we need to add the itemscope and itemtype attributes to the element too:

<section itemscope itemtype="http://data-vocabulary.org/Person">

…

   <dt>Mailing address</dt>

    <dd itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> 

 

 

This is nested scope — defining a new itemtype and itemscope (on the <dd> element) within an existing one (on the <section> element). This nested scope works exactly like the HTML DOM . The <dd> element has a certain number of child elements, all of which are scoped to the vocabulary defined on the <dd> element. Once the <dd> element is closed with a corresponding </dd> tag, the scope reverts to the vocabulary defined by the parent element (<section> , in this case).

 

7.   Technically, any microdata property can appear more than once.

 

8.   There are two major classes of applications that consume HTML, and by extension, HTML5 microdata:

  a)   Web browsers

  b)   Search engines

For browsers, HTML5 defines a set of DOM APIs for extracting microdata items, properties, and property values from a web page. But no one support it. When Google’s web crawler parses your page and finds microdata properties that conform to the http://data-vocabulary.org/Person vocabulary, it parses out those properties and stores them alongside the rest of the page data. Google even provides a handy tool to see how Google “sees” your microdata properties .