Designed for humans first and machines second, micro­formats are a set of simple, open data formats built upon exist­ing and widely adopted standards.

I didn’t under­stand it at first. I just couldn’t see the point. I wasn’t think­ing outside the box. It took a kick up the backside from Jeremy Keith and co to figure it out.

You see, most web-sites contain some form of useful data: Contact inform­a­tion, reviews, events and so on. Sometimes, it’s not even obviously struc­tured data. Take my “About the author” snippet for example:

Olly Hodgson is a Web Designer dude from Cheltenham, England.

It tells you who I am, what I do, where I’m from and includes a link where you can find out more about me. There’s almost enough for a business card.

The thing is, no two coders will mark-up their contact inform­a­tion, reviews and events in quite the same way, so it’s not exactly simple to extract it and use it elsewhere. Microformats aim to change that.

Here comes the science bit

Let’s take a closer look at that snippet:

<p class="vcard">
<a href="http://thinkdrastic.net/about/" class="fn url">Olly Hodgson</a> is a <span class="title">Web Designer</span> dude from <span class="adr"><span class="locality">Cheltenham</span>, <span class="country-name">England</span></span>.
</p>

You see those class-names wrapped around the import­ant bits of data? That’s the hCard micro­format in action. Basically, it’s an HTML version of vCard, which is the industry-standard electronic business card format. In there we’ve got a name (class=“fn”), a web address (class=“url”), a job-title (class=“title”) and so on.

Run this page through Technorati’s hCard to vCard converter and hey presto! A vCard you can open in your address book software.

The real beauty is that you don’t have to change the look-and-feel of your web-site in the slight­est. Just add the magical class-names to your exist­ing mark-up and you’re done.

So what’s next?

Microformats are obviously still in their infancy, but their poten­tial is endless. Where hCard opens up contact inform­a­tion, hCalen­dar does the same for events. hReview has the poten­tial to completely shake up the way products are rated in the online shopping world. XOXO could enable a web-browser to offer an outline-view of your site similar to the one offered in Microsoft Word. The list goes on and on.

What’s more, while micro­formats offer a stand­ard­ised way of extract­ing data from HTML, they don’t in any way lock you into writing it in a specific way. Your HTML code can look how you want it to really, as long as it includes those magical class attributes.

Go on, get out there and imple­ment them. You know you want to.