I have been giving a lot of thought to interoperability lately (I wrote a little bit on it a couple of weeks ago in Trains and Interoperability). As an industry, we spend quite a bit of effort on having dissimilar (and even similar) computer systems communicate with each other in an easy and safe manner. We have spent a lot of time just getting the systems to communicate with each other “on the wire” and we have made great progress in the last 10 years on getting systems to just talk to each other (Web Service standards have made synchronous calls across platforms almost a non-issue).

We have not made as much progress on the data formats that these systems use to communicate. With a few exceptions, there are not really any universally accepted standards. A codified system to provide data formats is one of the things that Microformats provides. For this reason and because they are so easy to adopt, Microformats are and important web standard that we should pay attention to.

Microformat – the example

The easiest way to explain Microformats is to show them in action. The classic example of a microformat is the contact card (or hCard) which lets you tell people how to contact you. I used a plug-in for Windows Live Writer to create my card and it is shown here:

Larry Clarkin
Microsoft

Microformat – the mark-up

So at this point you may be saying “Big deal, it looks like just HTML”. The difference between this and just plain old HTML is that it is marked up with specific tags that are defined by the standard. The markup is done with specific CSS classes (which are an extensible standard) as opposed to using HTML to mark it up. If you do a “view source” on your code you will see <div> and <span> tags that are match the names in the specification.

<div class="vcard">
    <span class="fn n">
        <span class="given-name">Larry</span>
        <span class="given-family">Clarkin</span> 
    </span>
    <div class="org">Microsoft</div>
    <div>
        <a class="email" href="mailto:blog@eraserandcrowbar.com">blog@eraserandcrowbar.com</a>
    </div>
    <div>
        <a class="url" href="http://eraserandcrowbar.com">http://eraserandcrowbar.com</a>
    </div>
</div>

One of the best benefits of using CSS for the markup is that it degrades “nicely” on older browsers and it does not have to affect the layout of the page.

Microformats – the viewers

The real magic of the CSS / microformat is twofold. Now that the page is marked up with the microformats, a program that is looking for contacts can easily find them on the pages, as opposed to having to do a lot of complicated parsing and having meta-data about the site. That is the machine to machine type of interaction.

For human to machine interaction, you can add an extension (or add-in) to your browser that understands microformats and it will “light up” the experience in the presence of a known microformat. This is a screen shot of upcoming.org (an events site) with an Internet Explorer extension from the oomph toolkit recently released by Microsoft (it contains several goodies for microformat development). The extension found 74 upcoming events on the page and will allow you to scroll through them and add them to your calendar with the click of a button (6 different calendars types are supported).

Screenshot of Microformats

The event (or calendar) microformat is called an hCalendar. One of the neatest things about microformats is that they are building out a taxonomy of items that you can tag up (events and contacts are just the first formats and most supported ones). You can see a list of the ones “in the works” on the Microformats wiki.

Note: Microformats were featured on a recent episode of the Thirsty Developer Podcast. I sat down with Pete Prodoehl who was the first person I ever heard mention Microformats. Give the show a listen if you want a casual conversation on why they are important.