Fun with Microformats

Erica Kastner · October 24, 2007

I just updated my food blog by encoding all of the restaurants’ contact information in microformats. It’s basically a way to encode vCard/vCal data using HTML. It’s part of the latest movement to bring semantics (meaningful data that can be interpreted by computer programs) to web content. For instance, with this technology you could easily write a program to find all the phone numbers and addresses listed on the internet and generate a worldwide phone book. Or you could track who has lived in a given house over the past X years. Or you could generate statistics on how many CEOs live next to golf courses. Or you could figure out, according to published calendars, when most people will be away from home and thus not watching the latest sitcom. And that’s just the beginning.

One thing that’s cool about the hCard specification is its flexibility. According to the spec, they recommend the following format:

<div class="vcard">
  <span class="fn n">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span>
       <span class="family-name">de Villamil</span>
     </a>
  </span>
  <span class="nickname">neuro</span>
  <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref</span><span>erred email</span>
  </a>
  <span class="org">Omatis</span>
  <span class="adr">
     <abbr class="type" title="dom">France</abbr>
     <span class="type">home</span> address
     <abbr class="type" title="postal">mail</abbr> and
     <abbr class="type" title="parcel">shipments</abbr>:
     <span class="street-address">12 rue Danton</span>
     <span class="locality">Le Kremlin-Bicetre</span>
     <span class="postal-code">94270</span>
     <span class="country-name">France</span>
  </span>
</div>

But I was able to easily use different elements in place of <div> and <span>:

<p class="vcard">
  <span class="fn n">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span>
       <span class="family-name">de Villamil</span>
     </a>
  </span>
  <span class="nickname">neuro</span>
  <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref</span><span>erred email</span>
  </a>
  <span class="org">Omatis</span>
  <a class="adr" href="http://somegooglemapslink">
     <abbr class="type" title="dom">France</abbr>
     <span class="type">home</span> address
     <abbr class="type" title="postal">mail</abbr> and
     <abbr class="type" title="parcel">shipments</abbr>:
     <span class="street-address">12 rue Danton</span>
     <span class="locality">Le Kremlin-Bicetre</span>
     <span class="postal-code">94270</span>
     <span class="country-name">France</span>
  </a>
</p>

This was useful because wordpress does not allow <div> in your blog posts. It automatically converts them to <p> :p