hCard Mapping

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>
<div class="adr">
<span class="locality">Columbia</span>,
<span class="region">SC</span>
<span class="country-name">USA</span>
<div class="tel">123-456-7890</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: ExampleDownload (24 KB)


  1. Woow! This is really great! Now it’s time to use the co�rdinates in the hCards to go world wide 😀

  2. Yea, I felt bad for leaving out the rest of the world, but it’s just a silly/primitive example. With real coordinates you could hook into the Google or Yahoo! maps APIs and create something much cooler.

  3. Great idea and implementation Jason. As you now know :), I’ve included your hcard-map in the Lemonade WordPress theme download so people can play with it and incorporate it if the so choose. I’d be curious to see how others set it up and display it.

    Again, thanks for the work and the sharing.

  4. I really need to get out more .. I just spent 2 days fiddling around with my own homebrewed version of this .. I thought I’d invented some great new data sharing method that would revolutionize the Internet (cough cough) – It was a fun 2 days while it lasted 🙂

  5. It just gives me an idea on mapping my school on the map. It would be neat to map out all the hcards around the campus which serves two purposes: give info on hcards and tell which buildings in the campus to find that person. I believe it will be a nifty idea.

    I wonder how can I do that?

Leave a Comment

Latest Tweet
  • RT @mrmrs_: In carpentry you measure twice and cut once. In software development you never measure and make cuts until you run out of tim…
Somewhat Recent
The Whole Nine Yards