My Tech World

Discovering Microformats

Microformat Logo

I don’t know why I haven’t looked at this sooner – probably because I’m so busy being distracted by all sorts of other interesting things that I’m finding out there at the moment, but I’m finally discovering Microformats.

To bring you up to speed, Microformats are a way of leveraging the existing properties of HTML (i.e. classes and attributes) and assigning specific, standardised values so that software can recognise them and interpret the meaning of what that HTML represents.  Confused?  Read on – and all will become clear.

Microformats on their own don’t do particularly much.  Essentially they are still just plain HTML but with a few extra style classes or values in the ID attribute.  But it’s what can be done with them with the right software that makes the difference.

Internet Explorer and Firefox both have add-ons that recognise microformats and consume that information in their own way.  For example, have a look at the Oomph project that was showcased at Mix 09 earlier this year, or install Operator for Firefox.

Are Microformats Right for Me?

Deciding whether or not you can take advantage of microformats depends on the sort of information you have on your pages.  There are a number of different specifications for various types of data and if you are providing any of their data types in an unstructured way then there’s a good chance you’d benefit from them.

Microformat Specifications

Specifications for microformats can be found at Microformats.org. This page lists off the main microformat types, how to mark up your HTML and where they can be applied.

Adding Microformats to Your Pages

Having established the why and what, let’s look at how.  Assuming you want to add contact information for yourself that users can potentially consume from their own browsers, what should the HTML look like?  Here are my contact details in microformat-compliant HTML:

Which, under the hood, looks like this:

 Phil Wheeler
OfficeAcuity

Wellington, 6037
  New Zealand
022 477 4413
web developer new zealand

The upshot of all this is that machines such as Google, Bing or Reuters (Calais), browser plugins such as Oomph, Tails or Operator and in-page scripts are able to identify, read and interpret the microformat data and consume that data in a meaningful way.  For example, those names and phone numbers might be parsed out to Microsoft Outlook or Mac as a vCard file, reviews of products or services might be aggregated and sent to a blog or review service and event information can be saved directly to your calendar; all without the need for excessive copying and pasting between multiple applications.

Other benefits to microformats include:

• More meaningful markup of HTML = enhanced quality of your site
• Standardised ways of adding specific kinds of information = consistency of content
• Semantic web is gaining a lot of momentum currently = staying up-to-date with current technologies and (in many cases) ahead of the competition
• Provides added value to users and site owners

One final advantage is that search engines are taking sites that use microformats very seriously.  This means that businesses wishing to maintain a strong online presence should too.

In an upcoming post, I’ll have a go at creating a jQuery plugin that pops up a range of actions for microformats available on the page. In the meantime, have a look at Oomph and Operator – a Firefox microformat plugin.

Tags: Microformats, Semantic Web, UX, web content, web design, web development