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>.

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.

7 Responses to “Microformats”

1. trovster

You could add a hAtom to your posts, coz you’ve got a title, content and date. Also, add rel-tag to your tags in the final paragraph. :)

2. Olly

I’d love to do the rel-tag thing, but they’re generated by WordPress and I haven’t figured out how to customise them yet.

As for hAtom, I haven’t got to that one yet. I’m still learning the fine art of hCalendar :)

3. Pete

I like the idea but the idea of adding in a load of extra tags baulks me a little. I appreciate that it’s still a sensible way to separate code from content but nested spans seems a little uncomfortable.

4. Caz Mockett

I’m just getting my teeth into microformats, too.

The next Web Standards Group meet is all about them – but it’s a night Thursday in London so you might not be too keen to make the trip… more details on my blog if you are interested.

5. Caz Mockett

Bum, that should have read “Thursday night” – I’m sure you know what I meant!

6. Olly

Thanks Caz :)

Pete – the spans in that example are there because that data isn’t particularly well suited for the format. More often than not, it’ll just be a case of adding the classes to existing mark-up.

7. Sheila Farrell

It really makes sense and something I ought to be doing.

Looking forward to the WSG meeting :-)