Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Microformats: The Fine Art of Markup: hReview

Last updated Oct 17, 2003.

By Andy Clarke

So far in this series of microformats articles, you’ve learned about how to add precise meaning to your HTML or XHTML for both contact information (hCard) and event information (hCalendar). I hope that you’ve enjoyed what you’ve learned—and if you have, that you’ll write a glowing review! By the spookiest of coincidences, reviews are the subject of this month’s article.

Unlike the two microformats that I’ve covered previously, where both have reached the specification stage of the microformats development process, the hReview microformat that I discuss this month remains at a draft stage. hReview still has aspects where a final consensus is to be reached, but it has evolved into a stable schema and has been implemented widely, largely due to the passion for microformats shared by the developers of sites such as Yahoo! Local and the popular wine review site Cork’d.

Everyone Has an Opinion

If you listen in on almost any conversation or read almost any article, you’ll find people who have opinions to share on almost anything. For instance, let me share with you some of the most pressing matters concerning me as I write this article:

  • Does season four of the TV show House M.D. live up to the first three seasons?
  • Is the Honda Hornet really the right motorcycle for someone who has just passed the test?
  • Which coffee shop in London’s Covent Garden is the best venue to meet with my new client tomorrow?
  • Do people really disagree with Microsoft’s proposals for version targeting?
  • What do people think about the sky-high price rise and record profits of British Gas?

If you search the Web, you’re likely to find a wide range of individual reviews related to all these topics, but it’s rare to find a place where these opinions are collected or aggregated in a meaningful way—a place where you can gauge people’s collective opinions. You might turn to sites such as Amazon.com, which encourage helpful reviews, but you won’t gain access to potentially hundreds or thousands of other reviews of the same product or service that have been published across other sites.

HTML and Reviews

Our human brains are adept at recognizing many types of reviews when we encounter them:

  • "November 17, 2007: Took my son to an amazing Motörhead concert at the M.E.N. Arena."
  • "Artist: Motörhead; Venue: M.E.N. Arena, Manchester; Rating: 9 out of 10."
  • "Motörhead still rocks, even after thirty years, but Alice Cooper was disappointing and we left before the end."

Unfortunately, our computers are less capable than our brains of recognizing delicate nuances of language. To computers, the information in each of the previous examples is little more than strings of characters.

This problem largely stems from the inability of HTML or XHTML to describe or mark up review-based content for the Web. This is a strange anomaly, as you might expect that academic inventors—the first users of the Web as we know it—couldn’t wait to share their opinions on the scientific papers of the day. Put the various markup specifications under a microscope if you must, but you’ll come away with sore eyes and without finding a single review element. Microformats in general and hReview in particular address this issue, effectively extending XHTML to provide a rich semantic schema for review content—a schema that has been built on the lessons learned from developing more established and widely adopted microformats such as hCard and hCalendar.

hReview in Detail

In common with other microformats, an hReview is composed of several elements contained within a root element given a class attribute value of hReview. Many explanations of hReview suggest that you use a division element as your root; however, in the context of the specific content that you’re describing, any element such as a list (<ol>), a list item (<li>), or even a paragraph (<p>) can serve the same purpose, indicating to software such as a browser extension or microformats parser that hReview content is present.

Let’s start by applying the hReview schema to a simple review of a Nonsense Robots CD, the fictitious ska band whose site I have been using as examples in this series. Tantek Celik (no doubt a keen ska aficionado) might have written this imaginary review on his website. Because Tantek’s review is one of a series of reviews on this page, you should begin by establishing an ordered list as your hReview root element:

<ol class="hreview">

...
</ol>

Review Summary

Reusing attribute values from existing schemas is a key part of the microformats development process. hReview takes components from both hCard and hCalendar. With this in mind, specify the title of this review by using the summary value, one that the creators of hReview have carried over from hCalendar:

<h4 class="summary">The most played album on my iPod</h4>

Review Type

Reviews describe or rate many kinds of products, services, venues, or other content. Because a machine will find it difficult or impossible to understand the difference between movie, book, or restaurant reviews, you should indicate the type of review by using the type property:

<span class="type">product</span>

The following table shows several of the options that are currently available.

Option

Description

product

For product reviews of either hardware or software

business

For example, a service review on a company’s testimonial page

event

A conference, concert, or perhaps even a meeting

place

For example, a restaurant, concert venue, or football ground

You might choose to hide this element from view in your design by using the CSS summary property.

Review Item

A review may contain several items, and you should indicate each one by adding the item property. You should also describe the product or service’s name meaningfully, and perhaps include the website URL where that item or service can be purchased. As hReview shares many common attribute values with other microformats, you can reuse both the fn and url values from hCard:

<h3 class="item"><a class="fn url" href="">Sushi Ska</a></h3>

Embedded hCalendar Content

So far, all of the hReview values that you’ve learned related to a product or service. But what additional values do you need to describe a person, a band, or perhaps a concert or other event more meaningfully? In keeping with the microformats principle of reusing attributes and values, and your ability to embed one microformat inside another, all of the building blocks for this rich content are ready and waiting for you to use.

For a review about a person, that person’s hCard contact information must be included within a full, valid hReview. In the case of an event, such as a concert, the hCalendar content related to that precise event should also be included. Let’s turn our attention to creating a list of concert reviews for Nonsense Robots, and begin by defining a list as the root element for the hReview:

<ul class="hreview">

You can quickly follow up by adding the item and other attributes described earlier:

<li>

<h3 class="item">
<a class="fn url" href="#">The Nonsense Robots live at Wembley Arena</a>

</h3>

<h4 class="summary">The best ska night of the year</h4>

<span class="type">event</span>
</li>

Ratings

In many respects, a rating is an essential element of any reviewing process. Although our human brains find it easy to understand the many different rating systems that we find both online and offline, it’s far more difficult for a computer to understand the subtle differences between the following:

  • Five-star hotel
  • Five stars (out of ten) for a concert

hReview allows you to create your own precise rating system by defining the rating value for any reviewed item, plus the highest possible rating that that item might have achieved. Of course, as this reviewer is partial to an evening full of fantastic ska, he’ll give it five stars out of a possible five:

<span title="5" class="rating">

<img src="stars_5_dark.png" alt="5" />
<span class="best">5</span>
</span>

It’s not always required, but you might choose to add the worst possible rating that a product, place, or event could receive:

<span title="5" class="rating">
<img src="stars_5_dark.png" alt="5" />
<span class="best">5</span>

<span class="worst">0</span>
</span>

Reviewer’s vCard

hReview doesn’t require the name of a reviewer. However, the identity of a person writing a review can enhance the credibility of that review, and you might choose to use this information in imaginative ways—perhaps to link to a page containing all reviews that person has written. When a reviewer is included, you should always use vCard to describe that person:

<span class="reviewer vcard">
<span class="fn">Jeffrey Zeldman</span>
</span>

Anonymous reviews are also possible (perhaps when a review is highly critical):

<span class="reviewer vcard">
<span class="fn">Anonymous</span>

</span>

Review Date

The date of a review can have a bearing on its relevance for a reader. For example, any band can have an "off" day, and not every concert performance will be legendary. Casting your mind back to last month’s explanation of the hCalendar microformat, and in particular the way in which event dates and times are handled, use the abbr design pattern to add the date and time that this concert started:

<p>Reviewed on <abbr class="dtreviewed" title="20070801T0800">August 1st 2007</abbr></p>

Description

Longer, more detailed reviews often include the reviewer’s opinions, thoughts, and other comments about the product, service, or event. hReview reuses the description property from hCalendar. Because our concert review is essentially what the reviewer is saying about the event, the blockquote element is the most appropriate element to use, as it can contain multiple paragraphs and other content:

<blockquote class="description">

<h5 class="vevent">
<a class="url" href="#">
<span class="summary">Live at MEN Arena</span>
on <abbr class="dtstart" title="20070923">September 23th</abbr></a>

</h5>

<p>The Nonsense Robots did an excellent job of mixing ska with some funky smooth reggae beats. It was a great performance and definitely got myself and others to look into The Nonsense Robots a little more.</p>
</blockquote>

Styling the Review with CSS

Your completed hReview should look like this:

<ul class="hreview">

<li>

<h3 class="item">
<a class="fn url" href="#">The Nonsense Robots live at Wembley Arena</a>
</h3>

<span class="type">event</span>

<h4 class="summary">The best ska night of the year
<span title="5" class="rating">
<img src="stars_5_dark.png" alt="5" />

<span class="best">5</span>
</span>
</h4>

<p>Reviewed on <abbr class="dtreviewed" title="20070801T0800">August 1st 2007</abbr></p>

<blockquote class="description">
<h5 class="vevent">
<a class="url" href="#">
<span class="summary">Live at MEN Arena</span>

on <abbr class="dtstart" title="20070923">September 23th</abbr></a>
</h5>

<p>The Nonsense Robots did an excellent job of mixing ska with some funky smooth reggae beats. It was a great performance and definitely got myself and others to look into The Nonsense Robots a little more.</p>

</blockquote>

<span class="reviewer vcard">
<span class="fn">Jeffrey Zeldman</span>
</span>
</li>

<li>[Another review]</li>

<li>[Another review]</li>
<li>[Another review]</li>
</ul>

Microformats bring additional rich, meaningful elements and attribute values to markup—legitimate hooks with which a web designer or developer can bind a design to a document using CSS. For this series of concert reviews, you’ll need little more than the simple float property to transform your unordered list containing hReviews into a four-column layout, as shown in Figure 1.

.hreview li {
float : left;
margin-right : 5px;
width : 205px; }

.hreview li:last-child { margin-right : 0; }
Figure 1

Figure 1 Reviewing The Nonsense Robots (design copyright Andy Clarke).

Summary

I hope that coming to grips with hReview to describe the meaning of your review content more precisely was a simple matter of reusing and adapting the microformats elements and attributes that should be familiar to you from hCard and hCalendar. I also hope that you’re always on the lookout now for opportunities where you can add greater semantic value to your review content by using hReview.