Microformats explained

One thing that always gets me and turns my world upside down and inside out, is when people talk about things as if they assume you know exactly what they are talking about. Ninety percent of the time, you don’t know and feel to stupid to ask, so you simply let it slide. In all honesty, I do the same.

In my previous post, I talked about the “next big thing” which some people misinterpreted as distributed social networking, when in actual fact, I’m talking about the technology that could allow for distributed social networking called Microformats.

So, in order to set things straight, let me try to explain Microformats, but before I start, I assume you know what HTML is, yes? Just in case you don’t, it is part of what makes this page look pretty and human readable. HTML and CSS are typically used to style a web page and to control its layout.

The funny thing is, there could be two pages which look exactly the same when viewed in a browser, but if you look at the HTML source of the pages, it could be completely different. In other words, there are many ways to skin a cat. There are many ways to achieve the same result using different methods. Although this is completely acceptable since the end result looks the same to the human eye, it could become a nightmare for computers to recognize what is meant by what.

Lets look at a simple example:

< h2 > The cow is green < /h2 >
< p > It ate too much grass, I think! < /p >
< p > written by: $lt; a href=”http://stii.za.net” > Stii < /a > < /p >
< p > On the 3rd of June 2008 < /p >

Now imagine we develop our application to recognise that everything between < h2 > and < /h2 > are titles and everything between < p > and < /p > are the body of the post. Okay, that could theoretically work, except that there might be other areas on the same page that have exactly the same HTML and we do not want that — like the date in the above example. It is also between < p > and < /p >. Or let’s consider what would happen if the above was marked up as follows:

< span style=”font-size: 2em;” > The cow is green < /span >
< div > It ate too much grass, I think! < /div >
< p > written by: $lt; a href=”http://stii.za.net” > Stii < /a > < /p >
< p > On the 3rd of June 2008 < /p >

Essentially, both are the same. They may well look the same to the human eye, but we now have to tell our application that everything between <span style=”font-size: 2em;”> and </span> are titles and everything between < div > and < /div > are the body of the post. Get the idea? Every time the HTML changes, we have to adapt our application since our app will not know when something is a title if it differs from our existing definitions of what a title is.

In walk Microformats and change all that. In short, Microformats use plain old HTML to enable us to define what data is what. Let’s look at the above example, but microformatted:

< div class=”hentry” >
< h2 class=”entry-title” > The cow is green < /h2 >
< p class=”entry-content” > It ate too much grass, I think! < /p >
< p > written by: < span class=”vcard” > < a class=”url” href=”http://stii.za.net” > Stii $lt; a > < /span > < /p >
< p class=”published” title=”2008-06-03T14:07:00-07:00″ > On the 3rd of June 2008 < /p >
< /div >

Because this has been microformatted and if a designer stuck to the standard (in other words, all microformats have to have specific attributes like “entry-title” for example), we can tell our application that no matter how things are styled, if it has the “entry-title” attribute, it is a post title. Our application can now recognise the data! It knows exactly what the date is, who the author is, etc…

So, what is the big deal then? In all three cases the above could look exactly the same to the human eye. Completely correct, but see, we don’t want only humans to read our data. We want machines to be able to read it as well, so that our data can become part of a bigger picture at the end of the day. We want to share our data.

This example is only one of many. If you have a look on the Microformats wiki, you’ll find there are quite a few others, which could come in very handy in various aspects.