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

I didn’t understand it at first. I just couldn’t see the point. I wasn’t thinking 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 information, reviews, events and so on. Sometimes, it’s not even obviously structured 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 information, 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="https://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 important bits of data? That’s the hCard microformat 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 slightest. Just add the magical class-names to your existing mark-up and you’re done.

So what’s next?

Microformats are obviously still in their infancy, but their potential is endless. Where hCard opens up contact information, hCalendar does the same for events. hReview has the potential 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 microformats offer a standardised way of extracting 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 implement them. You know you want to.