Microformats: good things come in small packages!

The Web 2.0 movement has helped raise the profile of creating standards based designs, using semantic HTML markup to add extra information to the content it contains i.e. data about data, or metadata.

The idea of a semantic web is not a new one Tim Berners-Lee and the W3C were talking about it over 10 years ago. The concept essentially revolves around making the content on the web both human and machine readable. Why would you want to do that you ask, well imagine a web in which machines can do more of the tedious work involved in finding, sharing and combining information on the web. With descriptive technologies like Resource Description Framework (RDF) and Web Ontology Language (OWL), a machine can process the knowledge in the content itself using processes similar to human deductive reasoning and inference, thereby obtaining more meaningful results. This type of “Data Web” has been touted as one of the possible descriptions of “Web 3.0″ potentially turning the web into one giant database of structured reusable data, and projects such as microformats are already working to exploit and promote this.

So with the background details out of the way we can get down to looking at what you can do with microformats with very little effort. The easiest place to start is with the hCard microformat. hCard is based on vCard the standard for electronic business cards and provides a 1:1 representation in semantic HTML/XHTML.

Example vCard:

BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
END:VCARD


And the same data marked up in the hCard microformat:

<div class="vcard">
<a class="url" href="http://tantek.com/">
<span class="n" style="display:none"> <!-- hide this from display with CSS -->
<span class="family-name">Çelik</span>
<span class="given-name">Tantek</span>
</span>
<span class="fn">Tantek Çelik</span>
</a>
</div>


As you can see from the HTML it is pretty straight forward to understand what each of the values represent, and it’s not much extra work to add in the additional HTML markup.

That’s all well and good I hear you say but why go to the extra effort? who is going to use it? Well you would be surprised how many people are already using it. Take for example the rel-tag microformat used heavily by bloggers to tag content. Technorati has used this information to build tag clouds of what bloggers are talking about now. Flickr the popular photo site also uses the rel-tag microformat to tag photos so they can be searched. The hCalendar microformat is also very popular with sites such as Facebook, Upcoming.org and Yahoo Local to name but a few who have implemented it.

So how do you find out if a site has gone to the extra effort to include microformats as part of their markup? If you use the Firefox web browser you can install the Operator plugin which will show you the various microformats embedded within a web page. Alternatively you can use Technorati’s new microformat search, although this is still in beta so don’t expect too much.

Back to our hCard example, adding microformats to your web page is a good idea, if nothing else it gets you thinking about writing semantic HTML, but it still doesn’t seem like your end user is getting much benefit from them. That is until you throw aggregators or converters into the mix. Pingerati aggregates microfomats from publishers such as Upcoming.org and Eventful and passes them on to services that are interested in using them. For our hCard example we can use a conversion service provided by Technorati to convert our hCard microformat into a file your user can download and import into their address book application e.g. MS Outlook.

For example to provide our users with a link that will download a vCard file they can import we have the following HTML on our contact page:


<a href="http://technorati.com/contacts/http://www.lcn.com/support/contact_us">


As you can see with very little effort you can add even more useful information to your websites without the need for any specialised web hosting or scripting.

The uptake of microformats by publishers and service providers has yet to reach critical mass but adoption rates and new services are appearing all the time.

Happy microformatting!