Even though I have been working in the IT industry (study and work) for about 6 years now, the learning never seems to stop. The other day while surfing the net, I came across Microformats, a brilliant idea I am surprised I am coming across only now.

Microformats are small additions one makes to the HTML code of their pages (mainly class, rel and rev attributes) to make their data more readable by machines without affecting the layout for users. Microformats allow / will allow a number of different applications to extract information like event info, contact info etc into organiser software. At the moment, microformats are supported by the likes of Yahoo and Google. There is also talk that microformats will help you /your site rank better in search engines, which should get most webmasters and SEO companies pretty excited. I am still in the beginner stages of knowing everything about microformats, so I apologise for any mistakes.

The most well known microformats are

  • hCard – Used to give vCard style info.
  • hCalendar – Event info.
  • XFN – (XHTML Friend Network): Specify relationship info in hyperlinks

I am going to try tackling each of these three microformats one at a time, starting with the hCard.

1. hCard

I could put my contact information on a page like so:

Kunaal Ramchandani

Developer
My Organisation
My Street

My City,
My State,
1111
My Country

My Phone

To convert it to a hCard, note that the name is the only required field in the hCard.
It is generally marked up with the class name “fn”. Always the first name first and then the family name

<span class="fn">Kunaal Ramchandani</span>

In case of a middle name, you add the “n” class name to “fn” and split the name up like so:

<span class="fn n">
 <span class="given-name">Kunaal</span> 
 <span class="additional-name">Anmol</span>
 <span class="family-name">Ramchandani</span>
</span>

In my case I also wanted to link my site to my name which is why I added the “url” class name to “fn”

<a class="url fn" href="http://www.kunaal84.com/blog">Kunaal Ramchandani</a>

I then edit my contact info adding the following classes to complete the hCard transformation:

  • title : Job title, multiple job titles can be mentioned comma separated
    <div id="hcard-Kunaal-Ramchandani" class="vcard">
     <a class="url fn" href="http://www.kunaal84.com/blog">Kunaal Ramchandani</a>
     <div class="title">Developer</div>
    </div>
  • org : Organisation you work for
    <div id="hcard-Kunaal-Ramchandani" class="vcard">
     <a class="url fn" href="http://www.kunaal84.com/blog">Kunaal Ramchandani</a>
     <div class="title">Developer</div>
     <div class="org">My Organisation</div>
    </div>
  • email : Email address
    <div id="hcard-Kunaal-Ramchandani" class="vcard">
     <a class="url fn" href="http://www.kunaal84.com/blog">Kunaal Ramchandani</a>
     <div class="title">Developer</div>
     <div class="org">My Organisation</div>
     <a class="email" href="mailto:email@mydomain.com">email@mydomain.com</a>
    </div>
  • tel : Telephone Number
    <div id="hcard-Kunaal-Ramchandani" class="vcard">
     <a class="url fn" href="http://www.kunaal84.com/blog">Kunaal Ramchandani</a>
     <div class="title">Developer</div>
     <div class="org">My Organisation</div>
     <a class="email" href="mailto:email@mydomain.com">email@mydomain.com</a>
     <div class="tel">My Phone</div>
    </div>
  • adr : Address, which requireds the following subclasses(which are pretty self explanitory)
    • post-office-box
    • street-address
    • extended-address
    • region
    • locality
    • postal-code
    • country-name
    <div id="hcard-Kunaal-Ramchandani" class="vcard">
     <a class="url fn" href="http://www.kunaal84.com/blog">Kunaal Ramchandani</a>
     <div class="title">Developer</div>
     <div class="org">My Organisation</div>
     <a class="email" href="mailto:email@mydomain.com">email@mydomain.com</a>
     <div class="adr">
      <div class="street-address">My Street</div>
      <span class="locality">My City</span>,
      <span class="region">My State</span>,
      <span class="postal-code">1111</span>
      <span class="country-name">My Country</span>
     </div>
     <div class="tel">My Phone</div>
    </div>

This is what my hCard finally looks like

Kunaal Ramchandani

Developer
My Organisation

My Street

My City,
My State,
1111
My Country

My Phone

There are many many more classes you can add to add more information.
You can also specify the ‘type’ where there could be multiple types of information, for example, your phone number can be home, work, fax, cell etc. There is even a firefox plugin known as Operator, which is able to read and identify the microformats on a page, check it out, pretty cool