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."

"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:

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:

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:

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:

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>

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.

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.