Blog on hold: This blog is currently on hold. Please visit blog.keranmckenzie.com for new blog posts

Microformats – Simple data formats for the masses

Tweet 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 [...]

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.

A review 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!

Support Studiowhiz.com

3 Responses

[...] I have published an article over at Studiowhiz on Microformats. Go check out the site – a great resource for anyone working on the web. Microformats – Simple data formats for the masses on studiowhiz.com [...]

02.25.08

Awesome post, Microformats are a brilliant format. I’m seeing more and more sites using them to share data etc

02.25.08

Awesome! Very interesting. This definitely is a great step forward in solving the internet’s semantics problem. Hooray for standards!