Quick Guide to Microformats

I first heard about microformats during the first @media conference in 2005, but didn’t understand what they were about so didn’t think any more about them. They’ve been mentioned at various times since then but each time that I’ve tried researching nothing has been simple enough for me to understand what the fuss is about.

Within the last few months, microformats have come back into my radar and now seems to be the time to try harder to understand them.

Where to Start

Tanktek gave a brilliant presentation about the microformat evolution at this year’s @media that made it all fall into place. At last.

Definition of Jargon

The definitions I’ve seen to date are too full of jargon, reading them alone didn’t help my understanding:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Home page of http://microformats.org/

Microformats are simple conventions for embedding semantics in HTML to enable decentralized development.

microformats-discuss mailing list

Simplified Definition

I may be over-simplifying things here with my definition, but this is how I see microformats:

A collection of standardised class names that can be added to your existing XHTML content. Applications and search engines can use this information by either collating it or centralising it for other purposes.

Emma

Example: hCard

hCard: a representation of the vCard standard (used in applications such as Outlook) in XHTML. It is used to markup contact information for people, companies and organisations which could then be used to download it into applications that support the vCard standard.

<div class="vcard">
  <a class="url fn" href="http://www.punkchip.com">
    Emma Sax
  </a>
  <div class="org">punkchip</div>
  <a class="email" href="mailto:nospam@nospam.com">
    nospam@nospam.com
  </a>
  <div class="tel">01234 5678</div>
</div>

Example: hReview

hReview (draft): to markup reviews of products, events, services, etc in XHTML. This could be used by aggregator feeds to show all reviews on a certain band or product from around the web.

<div class="hreview">
  <span class="version" style="display:none">0.2</span>
  <h2 class="summary">
    Watching the England v Portugal Match
  </h2>
  <abbr class="dtreviewed" title="20060701T1600">
    Jul 1, 2006
  </abbr>
  by <span class="reviewer fn">Emma</span>
  <span class="type" style="display:none">event</span>
  <img src="http://photourl.com" class="photo"/>
  <a href="http://fifaworldcup.yahoo.com/06/en/" 
     class="item url fn">
    England Quarter Final
  </a>
  <blockquote class="description">
    <p><abbr class="rating" title="5">Five stars</abbr>
      Watched in Bar Med, disappointing.  
      We lost 3-1 on penalties.
    </p>
  </blockquote>
</div>

Using Microformats

Microformats are starting to become more widely used. Yahoo! is the latest corporation to provide support for them including: hCards, hCalendars and hReviews.

More information can be found on the microformats website.

Tags: , ,

3 Responses to “Quick Guide to Microformats”

  1. Chris Lienert says:

    It took me a while before I worked out what the whole point was but now I’m well and truly on the bandwagon.

  2. Joe Dolson says:

    I think that may be the first description of microformats that I actually thought made any sense!

    What’s always turned me off of microformats has been the very quote you extracted: “Designed for humans first and machines second….” That definition has always struck me as so incredibly empty of meaning.

    Thanks!

  3. Emma says:

    Very glad to have helped someone else ‘get’ microformats.

Leave a Reply