studiowhiz ramblings

A Short Primer

You have probably already heard about Microformats. You’ve probably also wondered what they are. So let me tell you: microformats are set a of predefined attributes that you add to already existing markup. These enable both humans and machines to easily access the data they hold. Simply, they are small semantic tweaks to your web pages’ HTML/XHTML that make available previously inaccessible information. This information can include:

• Contact information
• Event information
• Resume information
• Reviews
• Bookmark information
• Syndication information

The beauty of microformats is that they don’t affect how your web pages are rendered by a browser. They are built upon already existing standards that you know and love: the class, rel and rev attributes.

An Example

This is a review taken from a popular online store.

This is how the code looks:

<div>
<p>
 <img src="/img/5-stars.png" alt="5 star rating"/>

 <strong>this book will change your life</strong>, January 3, 2007</p>
 <p>Reviewer: <a href="some-link">kristen</a> (San Francisco, CA) -
 <a href="some-link">See all my reviews</a>

</p>
<p>If you build web sites (or intend to have one built for you), and you
 haven't read this book, then stop what you are doing and buy it. When
 it arrives, stop what you are doing, and read it. It is awesome, and
 funny (believe it or not) and you will be happy that you did.</p>
</div>

Now consider the following code:

<div class="hreview">
 <p>

  <img src="/img/5-stars.png" alt="5 star rating" title="5" class="rating" />
  <strong class="summary">this book will change your life</strong>,
  <abbr class="dtreviewed" title="20070103T1146">January 3, 2007</abbr></p>

  <p>Reviewer: <a href="some-link" class="reviewer vcard"><span class="fn">kristen</span></a> (San Francisco, CA) -
  <a href="some-link">See all my reviews</a>

 </p>
 <span class="type" style="dispay:none;">product</span>
 <div class="item" style="display: none;">

  <a class="fn url" href="http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321385551/sr=8-1/qid=1171921047/ref=pd_bbs_sr_1/102-6812629-1991344?ie=UTF8&s=books">Designing with Webstandards</a>
 </div>
 <p class="description">If you build web sites (or intend to have one built for you),
 and you haven’t read this book, then stop what you are doing and buy it. When it
 arrives, stop what you are doing, and read it. It is awesome, and funny (believe
 it or not) and you will be happy that you did.</p>

</div>

Not that much different - just a few extra class attributes (in bold) and a new HTML element here and there. That is what makes Microformats so cool - you don’t need to learn any new markup language - it’s all the same stuff you work with everyday!

How is this useful?

Having all this information available in a format that can easily be gathered is the key to Microformats. Not only can third party web applications easily access this data, but desktop applications can store it, too.

Imagine a world where you visit a web site and your browser tells you there is contact/event information available on that page and gives you the option to save the date to your address book/calendar application of choice.

Imagine a world with search engines that return resumes, reviews or events from millions of web sites. All this can be achieved by using Microformats.

Currently there are few smart applications and bits of software that can deal with Microformats:

• Finda
  All finda’s company listings are marked up using hCard so you can simply save their vCard to your address book
• .Mac Webmail
  The .Mac Webmail service now supports hcard
• Microformats Extensions for Dreamweaver
  Dreamweaver Microformats Extensions (download) support authoring hCard, hCalendar, XFN, rel-tag, rel-license
• Firefox Extensions
  Operator - provides an architecture for Microformat parsing which is likely to be incorporated into the core of future versions of Firefox.

  Tails - The Tails Firefox Extension allows you to view microformats embedded on a web page, and perform customizable actions on the microformats via Tails Scripts.

• hKit Microformats Toolkit for PHP5
  A php toolkit to extract common Microformats from a page
• Technorati Contacts Feed Service
  Technorati Contacts Feed Service is a deployment of X2V to convert hCards to vCard (.vcf) format.
• Technorati Events Feed Service
  Technorati Events Feed Service is a deployment of X2V to convert hCalendar events to iCalendar (.ics) format.
• Technorati Microformats Search
  Technorati Microformats Search. Search for contacts (hCard), events (hCalendar), or reviews (hReview) published on blogs and other web sites.
• Upcoming.org
  Upcoming.org - hCalendar support in events listings and individual events.
• X2V

  Brian Suda has created several XSLT files to extract microformats from HTML. From that the X2V webservice/favelet emerged. The XSLT and favelet extracts hCard and to produces .vcf (vCard) files and hCalendar to produce .ics (iCal) files.

• Yahoo Local
  Yahoo local supports hCard, hCalendar, and hReview.
• Yahoo UK Movies

  Yahoo! UK Movies supports hReview.

Conclusion

We - as web professionals - need to start using Microformats in everything we build. The more we use Microformats in our web development the quicker it’ll be embraced by software houses and application developers. We need to bring Microformats to the mainstream and it’s only you and I that can help that push!

Don’t be scared of Microformats. Embrace them, use them, love them. It’s easy!