A Business Card Microformats Site

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

All microformats are are standardized ID and Class names to wrap data in. Really. That’s it.

Say you are having a birthday party next week and you are posting about it on the web. That event has a name (Birthday party!), a location (Chuck E. Cheese!), a time (from 6:00pm-9:00pm), and some extra details (No gifts). There are many many ways to present this information semantically the web. The event could be a definition list with DL’s and DT’s. You could use the very common header and paragraph tags. What microformats proposes, is that you don’t use those, but use a specific standardized set of tags known as an hCalendar event.

This is what that event would look like as an hCalendar event:

<div id="hcalendar-Birthday-Party" class="vevent">
  <abbr title="2008-09-19T06:00Z00" class="dtstart">September 19, 2008  6</abbr> – 
  <abbr title="2008-09-19T09:00Z" class="dtend">9am</abbr> :  
  <span class="summary">Birthday Party</span> at 
  <span class="location">Chuck E. Cheese</span>
  <div class="description">No gifts</div>

What is quite nice about this, is that it only uses very generic wrappers for all the data. Most sites don’t apply any styling directly to very generic elements like divs and spans alone. So, you have the opportunity to use the class names provided to match the styling of your site.

Let’s make a simple “Business Card” website that features a fully functioning Microformats “hCard”. Perhaps the simplest way to create your own hCard is to use the hCard generator on the Microformats site itself.

Here is what mine looks like:

<div id="hcard-Chris-Coyier" class="vcard">
	<a class="url fn" href="http://chriscoyier.net">Chris Coyier</a>
	<div class="org">CSS-Tricks</div>
	<p><a class="email" href="mailto:[email protected]">[email protected]</a></p>
	<div class="adr">
		<span class="locality">Portland</span>, 
		<span class="region">OR</span>

Since the hCard is wrapped entirely in one div, we can actually target it with CSS and replace the whole darn thing with an image if we want to (CSS Image Replacement). That is exactly what I’ve done with the demo page. I just wanted to show that using Microformats doesn’t lock you into any kind of particular style in any way.

View Demo Download Files


Notice in the demo the little mini-card is clickable to download my vCard. A vCard is a standard file format for address book software (e.g. Apple’s Address Book). hCard is a microformat based on that standard. Yeah that’s a little confusing…

So you have microformats on your site. So what?

Well, to be honest, it’s probably not that big of a deal… yet. At the very least though, you can look at it as “doing the right thing”. Every day, you can see the evidence of what is possible through the now fairly-well-adopted web standards. Imagine what more we could do if all data was moved into standardized formats.

But there are some cool advantages to being an early adopter anyway. Remy Sharp’s microformats bookmarklet from 2 years ago is still cool today. All you do is drag it up to your bookmarks bar and click to activate it on any page. It looks for all microformats on the page and gives you a nice modal window to download them. Super-quick way to add people to your address book, add events to your calendar, etc.

More Information

Tails Firefox Extention: Really slick little Firefox plugin. Auto-detects microformats and gives you a little icon in the bottom bar. Click it to open a sidebar for viewing/exporting them.

Why Microformats?