hreview

Description

The Web is a good resource for product and service reviews. I can’t count how many times I’ve searched the Web looking for reviews of electronics items or hotels prior to making a commitment to buy. Often, the process of search is governed by whether I know the web site that best caters for that kind of product. So if I was looking for a review of the film Aliens, I’d tend to go to The Internet Movie Database first, rather than search for “film review aliens.” Wouldn’t it be great if a product, service, or any other category of item could be reviewed and structured in a standardized way, such that hunting down reviews from a web search would be easier? That’s precisely what the hReview Microformat is for.

In the example HTML shown above, the review is identified by a class attribute with the value "hreview". Microformat-aware browsers, browser extensions, and search engines can interpret the content inside that container appropriately, as each individual item that’s reviewed is identified with class="item":

<div class="hreview">
 <div class="item">
 <!-- Review content goes here -->
 </div>
</div>

A range of information can be identified via the class attribute, including:

  • "fn", for the full name of the product or service being reviewed
  • "summary", for a quick summary of the review
  • "description", for a full review description content
  • "type", which describes what type of item is being reviewed (product, business, event, etc.)
  • "reviewer", for the name of the reviewer (The reviewer’s details should be marked up using nested hCard.)
  • "dtreviewed", for the date of the review
  • "permalink", which is optional, for identifying a permanent link for the review (This is particularly important for content that may be archived, such as blog content that may appear on the homepage, but is eventually bumped off as new content is published.)
  • "license" , which is optional, for presenting license information about the content (Refer also to rel-license Microformat (coming soon!).)
  • "tags", which is optional, for keywords or phrases, using rel-tag, each with an optional rating

In the example above, the review rating was provided as a score of nine out of ten. However, you may prefer to provide a rating out of five instead:

<p><span class="rating">4</span>/<span class="best">5</span></p>

Note that the "rating" can be combined with "best" to indicate the upper limit of the review score. You can also use HTML entities to create star ratings—which is what the "&#x2606;" character does in the example below. This task is made easier by the hReview creator tool. If you wanted to indicate that a hotel has a four-star rating, you could literally use stars, rather than plain text:

<div class="hreview">
 <div class="item">
 <span class="fn">Seaview Hotel</span>:
 <abbr class="rating"
 title="4">&#x2606;&#x2606;&#x2606;&#x2606;</abbr>
 </div>
</div>

Note that when you’re using the HTML entities as shown above, it’s necessary to provide the actual figure in plain text as part of an abbr element, such that search engines, aggregators, and so on can interpret the rating properly. The same technique is used for dates. Any review should be accompanied by a review date, as it’s a snapshot taken at a given point in time. Thus, a review of the film Tron might be laughable if it stated that the film’s computer graphics were state of the art, but if that review were dated to the film’s original release date, the comments would be a lot more understandable.

To indicate a date, you need to wrap the human-friendly review date in an abbr element, and provide a date in the format YYYYMMDDTHHMM, where the T is a separator between the data and time sections:

<div class="hreview">
 <div class="item">
 <span class="fn">Seaview Hotel</span>:
 <abbr class="rating"
 title="4">&#x2606;&#x2606;&#x2606;&#x2606;</abbr>
 (rated on <abbr class="dtreviewed"
 title="20080101T1200">January 2008</abbr>)
 </div>
</div>

Note that the same concerns regarding the use of the abbr and title, and its impact on users with assistive technology, apply here (refer to the section on dates in hCalendar for more).

Example

Here’s a summary review that provides a rating out of ten:

<div class="hreview">
 <div class="item">
  <h2 class="fn">Aliens</h2>
  <p class="summary">Action-packed follow-up to Ridley Scott's Sci-Fi monster movie.</p>
  <p><span class="rating">9</span>/<span class="best">10</span></p>
 </div>
</div>

User-contributed notes

Related Products