HTML5: Up and Running

Marking Up Reviews

Here’s another example of making the Web (and possibly search result listings) better through markup: business and product reviews.

This is a short review I wrote of my favorite pizza place near my house. (This is a real restaurant, by the way. If you’re ever in Apex, NC, I highly recommend it.) Let’s look at the original markup:

<article>
  <h1>Anna's Pizzeria</h1>
  <p>★★★★☆ (4 stars out of 5)</p>
  <p>New York-style pizza right in historic downtown Apex</p>
  <p>
    Food is top-notch. Atmosphere is just right for a "neighborhood
    pizza joint." The restaurant itself is a bit cramped; if you're
    overweight, you may have difficulty getting in and out of your
    seat and navigating between other tables. Used to give free
    garlic knots when you sat down; now they give you plain bread
    and you have to pay for the good stuff. Overall, it's a winner.
  </p>
  <p>
    100 North Salem Street<br>
    Apex, NC 27502<br>
    USA
  </p>
  <p>— reviewed by Mark Pilgrim, last updated March 31, 2010</p>
</article>

Note

You can follow along online with the changes made throughout this section. Before: http://diveintohtml5.org/examples/review.html; after: http://diveintohtml5.org/examples/review-plus-microdata.html.

This review is contained in an <article> element, so that’s where we’ll put the itemtype and itemscope attributes. Here’s the namespace URL for this vocabulary:

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

What are the available properties in the Review vocabulary? I’m glad you asked. They’re ...