HTML5: Up and Running

Marking Up Organizations

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>

Note

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 <article> element, so let’s start there:

<article itemscope itemtype="http://data-vocabulary.org/Organization">

As with marking up people, you need to set the itemscope and 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 vocabulary.

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.