Microdata isn’t limited to a single vocabulary. “About” pages are nice, but you probably only have one of them. Still hungry for more? Let’s learn how to mark up organizations and businesses.
I’ve created a sample page of business listings. Let’s look at the original HTML markup, without microdata:
<article> <h1>Google, Inc.</h1> <p> 1600 Amphitheatre Parkway<br> Mountain View, CA 94043<br> USA </p> <p>650-253-0000</p> <p><a href="http://www.google.com/">Google.com</a></p> </article>
You can follow along online with the changes made throughout this section. Before: http://diveintohtml5.org/examples/organization.html; after: http://diveintohtml5.org/examples/organization-plus-microdata.html.
Short and sweet. All the information about the organization is
contained within the
element, so let’s start there:
<article itemscope itemtype="http://data-vocabulary.org/Organization">
As with marking up people, you need to set the
itemtype attributes on the outermost element. In
this case, the outermost element is an
<article> element. The
itemtype attribute declares the microdata
vocabulary you’re using (in this case,
http://data-vocabulary.org/Organization), and the
itemscope attribute declares that all
of the properties you set on child elements relate to this
So what’s in the Organization vocabulary? It’s very simple and straightforward. In fact, some of it should already look familiar. Table 10-3 lists the relevant properties.