Discover Microformats for Embedding Semantics : Page 3

Putting Microformats to Work
The hCard type is used for contact information and is based on the vCard standard. By providing structure to news stories and blog posts, which often discuss people, it is possible for web crawlers to retrieve this information and automatically convert it to a vCard, which can be used in a vCard-aware application such as Apple's Address Book. This conversion makes it easy for people to populate their address books and build contact lists. By applying cascading styles sheets (CSS) to hCards you can make them appear however you wish and publish them directly on web pages and blogs. Here's a sample:

BEGIN:VCARD
VERSION:3.0
N:Sherman;Lee
FN:Lee Sherman
URL:http://www.devx.com/
ORG:Jupitermedia
END:VCARD

Using the hCard microformat markup, the entry becomes:

<div class="vcard">
<a class="url fn" href="http://www.devx.com/">Lee Sherman</a>
<div class="org">Jupitermedia</div>
</div>

Here is a more detailed example:

Jupitermedia
150 Executive Park Blvd., Suite 4100
San Francisco, CA 94134
USA
Phone: +1-415-555-1234
Email: info@jupitermedia.com
Fax: +1-415-555-6789

Where the markup is:

<div class="vcard"> 
  <div class="fn org">Jupitermedia</div> 
  <div class="adr"> <div class="street-address">
    150 Executive Park Blvd Suite 4100</div> 
  <div> <span class="locality">San Francisco</span>, 
    <abbr class="region" title="California">CA</abbr> 
    <span class="postal-code">94134</span> </div> 
  <div class="country-name">USA</div> </div> 
  <div>Phone: <span class="tel">+1-415-555-1234</span> </div> 
  <div>Email: <span class="email">info@jupitermedia.com</span></div> 
  <div> <span class="tel"><span class="type">Fax</span>: 
    <span class="value">+1-415-555-6789</span> </span> </div> </div>

The hCalendar type is used for events and is based on the iCalendar standard. This type is perhaps even more useful than hCard in that it provides a way for desktop-bound calendars such as Outlook on Windows or Apple's iCal to take advantage of the various online calendars and events listings published by numerous event producers, independent publications, and corporate entities. Web crawlers can automatically convert hCalendar listings to iCalendar listings, where they can then be inserted programmatically into desktop applications.

In addition, by marking up event notices on web pages and blogs, content authors can provide users with an easy way to extract this information, eliminating the need to retype it or copy and paste it into a calendar application. As with hCard, CSS can be used to specify the appearance of an online calendar. For example, an equivalent event:

BEGIN:VCALENDAR
PRODID:-//XYZproduct//EN
VERSION:2.0
BEGIN:VEVENT
URL:http://www.web2con.com/
DTSTART:20071005
DTEND:20071020
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel\, San Francisco\, CA
END:VEVENT
END:VCALENDAR

would look like this in the hCalendar microformat:

<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
  <abbr class="dtstart" title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">19</abbr>,at the 
  <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

Those are two of the most common types of microformats—contacts and events—but with the arrival of Web 2.0, these days most web pages include rich media types such as the videos found on YouTube or specific types of content such as the movie reviews found on Rotten Tomatoes. Wouldn't it be nice if you could encapsulate this information to be extracted for use in other applications? This kind of encapsulation and extraction is possible with microformats in certain applications; however, it's important to note that not every media type or content type has a corresponding microformat available currently.

Everyone's a Critic
A proposed microformat called hReview is designed to provide a way for users to share, distribute, syndicate, and aggregate reviews. The hReview type is designed around a minimal schema that the authors hope will be simple yet flexible enough to accommodate various kinds of reviews for books, movies, restaurants, and so forth on the web today. This application is challenging because review formats vary greatly. Yet, most reviews share some common fields, making it possible to come up with a schema based on this subset.

Here's an example of how hReview might be used, as taken from the wiki at Microformats.org. The HTML code for a product review looks like this:

<div>
<a href="http://www.amazon.com/exec/obidos/ASIN/B000089CJI/">
<img src="http://images.amazon.com/images/P/B000089CJI.01._SCTHUMBZZZ_.jpg" 
  alt="Album cover photo: The Postal Service: Give Up." />
  The Postal Service: Give Up</a>
<blockquote><p>
"The people thought they were just being rewarded for treating others as they 
  like to be treated, for obeying stop signs and curing diseases, for mailing 
  letters with the address of the sender.... Don't wake me, I plan on sleeping 
  in..."</p>
<p>
"Nothing Better" is a great track on this album, too... </p> </blockquote>
(*****)
</div>

Adding hReview to this review requires a few more elements for the rating and reviewer:

<div class="hreview"><span class="item">
<a class="url fn" href="http://www.amazon.com/exec/obidos/ASIN/B000089CJI/">
<img src="http://images.amazon.com/images/P/B000089CJI.01._SCTHUMBZZZ_.jpg" 
  alt="Album cover photo: The Postal Service: Give Up. " class="photo" />
  The Postal Service: Give Up</a></span>
<div class="description"><p>
"The people thought they were just being rewarded for treating others as they 
  like to be treated, for obeying stop signs and curing diseases, for mailing 
  letters with the address of the sender.... Don't wake me, I plan on sleeping 
  in..."</p>
<p>
"Nothing Better" is a great track on this album, too...</p></div>
(<abbr class="rating" title="5">*****</abbr>)
<p class="reviewer vcard">Review by <a class="url fn" href=
  "http://ifindkarma.com/blog/">Adam Rifkin</a>,
<abbr class="dtreviewed" title="200502">February 2005</abbr></p></div>

And this hReview might be presented like this:

[Album cover photo: ] [The Postal Service:] [ Give Up ] 
The Postal Service: Give Up 
"The people thought they were just being rewarded for treating others as they 
  like to be treated, for obeying stop signs and curing diseases, for mailing 
  letters with the address of the sender... Don't wake me, I plan on sleeping 
  in..." 
"Nothing Better" is a great track on this album, too... 
(*****) 
Review by Adam Rifkin, February 2005. 

Besides the microformat types discussed here, there are several others that have been designed to enable semantic markup for specific types of information:

• hAtom (hAtom spec.) – for marking up Atom feeds from within standard HTML
• hResume (hResume spec.) – for résumés or CVs
• rel-directory (rel-directory spec.) – for creating and including distributed directories
• rel-nofollow – an attempt to discourage third-party content spam (for example, spam in blogs)
• rel-tag (rel-tag spec.) – for decentralized tagging (Folksonomy)
• xFolk (xFolk spec.) – for tagged links
• XFN – for social relationships
• XOXO – for lists and outlines

As mentioned previously, the microformats specifications are a community effort, and they are open and widely available. Support for microformats is growing. They are expected to be supported natively by forthcoming browsers such as Firefox Version 3 and Microsoft Internet Explorer 8. Developers who want to get an early start on using microformats can make use of the Firefox extension Operator, which is able to detect common microformats such as hCard, hCalendar, geo, hReview, and rel-tag.

Though they are relatively new, microformats are gaining support from Google and Yahoo! and are already in use by such web services as Yahoo! Local, Flickr, and Upcoming.org. They represent the next stage in the evolution of the web by moving beyond web sites as static "brochureware" and providing a simple approach to building semantics into current web site design and development. As the industry shifts from the original web and more recent dynamic Web 2.0 technologies to the coming Web 3.0 by way of semantic technologies, we should see the Internet provide the ability to work with web content and behave as if it is all implemented in one enormous application that anticipates the needs of its users and acts accordingly. Microformats can help you get there from here by providing a simple way to embed semantics in web pages.

Previous Page