When I first heard about Microformats, I was a little confused about all the excitement. I may be a technically minded person (sometimes) but the idea of making information more machine readable didn’t make me bounce around with glee. Nevertheless, I felt obligated to do my part in advancing the evolution of the internet and started looking into the documentation. Despite all of the technical minutiae that exists in the wiki, Microformats are very easy to understand and implement. In most cases this simply involves wrapping certain types of data with <div>s or <span>s and tagging them with a predefined class name. By wrapping and tagging these pieces and sets of information, they can then be extracted and utilized by other programs, apps, and scripts. Obviously, there’s a lot more to it than this, but that’s the gist of it.

What does this look like for you as a constructor of websites? Well, let’s use the ubiquitous hCard as an example. According to the wiki:

hCard is a simple, open, distributed format for representing people, companies, organizations, and places…

So, any time you want to display contact information on a website for any of the types of entities listed above, you would use the hCard format. To make it uber-simple, the Microformats authors have even set up an hCard Creator. In the form, you can enter as little or as much information as you’d like, and it will spit out the appropriately formed hCard code:

<div class="vcard">
 <a class="url fn n" href="http://www.jasongraphix.com/">
  <span class="given-name">Jason</span>
  <span class="additional-name">Edmond</span>
  <span class="family-name">Beaird</span>
</a>
 <div class="adr">
  <span class="locality">Columbia</span>, 
  <span class="region">SC</span>
  <span class="country-name">USA</span>
 </div>
 <div class="tel">123-456-7890</div>
</div>

Viola! A nice little bundle of information stored in appropriately tagged <div>s and <span>s. But whatever should I do with it? That’s what I was asking myself last week when I created a set of hCards for the regional offices of a corporate client. With a little CSS lovin’ and a couple simple jQuery functions, I created a page that highlighted each office’s contact information and map location when you hovered over either the map location or the hCard details. Confused? Well, I’ve adapted the main concept into a similar example. Instead of regional headquarters, I’ve used the locations of a few people who’s blog I read. Instead of map dots, I’ve used each website’s favicon. Clicking on either the favicon or the hCard will take you to that person’s site. Feel free to download and use this example however you see fit. Enjoy!

hCard Mapping: Example - Download (24 KB)