Flirting with Microformats

I'm probably a bit late to the party here, but over the last few days I've been taking a better look at Microformats and how useful they can to users of your website. They've received some strong support from many web standards evangelists including the Web Standards Project so there must be something in them.

In case you don't know, Microformats are a way of using traditional XHTML in such a way that it can be semantically understood and useful to other applications. Still confused? Don't worry, it'll all make more bit of sense with an example.

Take a typical code snippet from a contact page:

This meaning of this is obvious to you or me: it's a set of contact details. One of the things that humans are so clever at understanding is the meaning of something given its context. In this case we see a person's name, followed by company name, address and telephone number and it becomes obvious that the whole block represents contact information for that person.

Machines (software applications, search robots, whatever) aren't that clever, and there's no real way for a machine to understand the meaning of this information given its current form. It just looks like more text.

Step up Microformats: a way to markup our code using existing XHTML conventions in order to make them more semantically meaningful. In turn, this makes the data much more useful, and open to a whole host of new possibilities.

Let's take a look at how we can mark up the above contact details in a more useful way with Microformats. The first important thing about Microformats is that they use existing XHTML conventions including normal XHTML tags like <address>, <div>, <span> and attributes like class and title. This means that out of the box they'll already be usable in the common browsers which we use at the minute.

The second important thing is conventions. If we agree upon conventions for our markup, then we can all create data to the same standards and programme machines to understand them. For example, a Microformat has been created to describe contact information and it's called hCard.

Let's look at the above contact information in hCard format:

At first glance it might seem unnecessarily complicated, but it's not really. It's still using the familiar XHTML elements and attributes that we all know and love, except we've added in some <spans> and a bunch of extra class names. These class names are crucial because they represent the conventions mentioned above.

So what exactly can Microformats do in terms of practical use? Well, now that we've marked up our contact details using the hCard convention it immediately becomes useful to other software applications. Don't believe me?

What you should have seen is your default mail application offering you the ability to add me straight into your contacts list. Handy isn't it? And all possible with the power of Microformats. There are lots of other Microformats but this example illustrates how a simple change to your markup can make something like a contact page immediately more useful to a site visitor.

Caveat: If you've been blustering with pent up rage throughout this article it's probably because you think a lot of this stuff should come under the remit of XML. In fact, that's what XML was designed to do. Semantically describe data, and I'd agree with you that the Microformats solution isn't perfect. However browser support for XML is still pretty poor (IE6 of course) and microformats do an admirable job while we wait for the envitable progress.