Webmasters/Site owners Help

Microformats

Marking up data using microformats

Microformats are simple conventions used on web pages to represent commonly published things such as reviews, people, products, and businesses. Generally, microformats consist of <span> and <div> elements and a class property, along with a brief and descriptive property name (such as dtreviewed or rating to represent the date an item was reviewed and its rating, respectively.)

Here is a short HTML block showing basic contact information for a person.

<img src="www.example.com/bobsmith.jpg" />
<p><strong>Bob Smith</strong></p>
<p>Senior editor at ACME Reviews</p>
<p>200 Main St</p>
<p>Desertville, AZ 12345</p>

This is the HTML marked up with additional microformats:

<div class="vcard">
   <img class="photo" src="www.example.com/bobsmith.jpg" />
   <p><strong class="fn">Bob Smith</strong></p>
   <p><span class="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
   <p><span class="adr">
      <span class="street-address">200 Main St</span><br>
      <span class="locality">Desertville</span>, <span class="region">AZ</span> 
      <span class="postcode">12345</span>
   </span></p>
</div>

To understand microformats, think about two concepts: entities (for example, a person) and properties of those entities (for example, name, job, company, and address). Entities are called "microformats". The microformat used to describe people is called hCard and referred to in HTML as vcard.

In general, microformats uses the class attribute in HTML tags to assign labels to specific types of data. In the first line of the example above, we create a div tag (any other tag, such as span, would work equally well) to include a class attribute with the value vcard. The vcard class indicates that the enclosed HTML describes a person. (hCard can also be used to describe places or organizations.)

To use microformats, all you need to do is wrap your content in the appropriate labels using the class attribute. The labels change depending on the kind of data you are marking up.

Inside the HTML block labeled vcard, you can label properties about the person, such as photo (a photo of the person), fn (the person's name), title (the person's job title), org (the person's company or organization), and adr (the person's address). Properties such as adr can contain sub-properties such as street-address, locality (city), region (state or province), and postcode.

The class attribute is also used in many web pages for other reasons, such as CSS rendering. Microformats classes and non-microformats classes can generally co-exist happily, but be careful to avoid naming conflicts.

Nested microformats

Let's take the following example:

<p><strong>Blast 'Em Up Review</strong></p>
<p>by Bob Smith, Senior Editor at ACME Reviews</p>
<p>This is a great game. I enjoyed it from the 
opening battle to the final showdown with the evil aliens.</p>
<p>4.5 out of 5</p>

In this case, one entity (a person, Bob Smith) is nested inside a another entity, a review. Reviews are described by the hReview microformat, written as class="hreview". People are described by the hCard format, written as class="vcard". Here is how the code block above looks with microformats markup:

<div class="hreview">
   <span class="item">
      <p><strong><span class="fn">Blast 'Em Up Review</span></strong></p>
   </span>
   <span class="reviewer vcard">
      <p>by <span class="fn">Bob Smith</span>, <span class="title">Senior Editor</span> 
      at <span class="org">ACME Reviews</span></p>
   </span>
   <p><span class="description">This is a great game. I enjoyed it from the 
   opening battle to the final showdown with the evil aliens.</span></p>
   <p><span class="rating">4.5</span> out of 5.</p>
</div>

Since this is a review, we use the class="hreview" label to wrap the entire HTML block. This example introduces a few new properties, such as item (the item being reviewed; can include the sub-property fn, which represents the name of the item), reviewer, description, and rating.

We combine review and people data by adding the following line:

<span class="reviewer vcard">

By putting reviewer and vcard on the same line, separated by a space, we are defining the person (Bob Smith) as the writer of the review.

To learn more about microformats, visit microformats.org.

For specific vocabulary and examples, see:

• Reviews
• People
• Products
• Businesses and organizations