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.)"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
"☆" 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">☆☆☆☆</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">☆☆☆☆</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
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.