Grow your CSS skills. Land your dream job.

A Business Card Microformats Site

Published by Chris Coyier

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>
</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:chriscoyier@gmail.com">chriscoyier@gmail.com</a></p>
	<div class="adr">
		<span class="locality">Portland</span>, 
		<span class="region">OR</span>
	</div>
</div>

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?

Comments

  1. camilo vitorino
    Permalink to comment#

    very nice!
    another great firefox extension is Operator.

  2. Permalink to comment#

    Thank you for posting about Microformats! I love Microformats, and the ability to add semantics to our data using plain old html instead of a complex, confusing, overwrought XML schema like RDF or Dublin Core.

    Another thing you should mention in your “So what?” section is that the use of Microformats in your site makes your information very machine-readable, and opens the doors to some insanely cool mashups.

    Imagine a calendar aggregator that could crawl all the blogs (and tweets?) from your town, and consolidate all the events onto one central calendar. Something like that is very difficult to code if the events are posted as freeform text, but would be a piece of cake if everyone used hCalendar!

  3. Permalink to comment#

    P.S. Something like I mentioned above already exists for Portland – http://calagator.org/ – but could be much better and require less manpower if Microformats were more widely adopted.

  4. Microformats are cool, but aren’t necessarily the “right thing to do.” RDFa is a similar (and W3C recommended) standard for semantic tagging. Yahoo! has already begun indexing based on RDFa.

    There is a very interesting article over at Sitepoint that delves into these issues.

  5. Permalink to comment#

    I’ve been meaning to add hCard microformat to my portfolio site, thanks for the info!

  6. Permalink to comment#

    Glad to see someone else blogging about microformats (they are a favorite of mine). A couple points to add to the discussion:

    1- The microformats specifications don’t really include the markup, per se. As you metioned, the key are the classes (not IDs though).

    The examples on the Microformats wiki include what you have used as your example, but you really could still markup your content any way you wish (ideally semantic).

    You could still use a <dl>, or <hx> with a <p>. In fact, there are ways to specify microformats with “natural language”

    2- As for the RDFa vs. microformats argument, it is far too soon to jump on either bandwagon. Both have value.

    Microformats have limitations, but it is a open and evolving specification for human- and machine-readable data. And people are still developing tools and implementing the approach, especially with XFN and link-based relationships using the rel attribute. Just look at most social networking/media sites.

    RDFa, too, has limitations: doesn’t work in text/html (and the web is still largely (X)HTML. Word is that HTML5 may address this latter point. And there are parsers that can make it work.

    But, at the core, neither are perfect yet both are striving for a more semantic web, which benefits everyone regardless of how we get there.

    What is needed some convergence of the two. And to have more people writing and talking about microformats (and/or RDFa) and developing tools and applications that take advantage of the contextual information both provide.

  7. Interesting article. Standardization is always a good thing.

  8. Permalink to comment#

    For all the Safari folk there is a wonderful little Microformats plugin available here:

    http://zappatic.net/safarimicroformats/

  9. Permalink to comment#

    I’ve been hearing about microformats for ages and never really got the gist of why you would use them or even what they were but that’s really made things clearer. Thanks

  10. Permalink to comment#

    http://hcard.geekhood.net/ – hCard validator

  11. Something totally new for me. Thanks for explaining these things, become a lot clearer!

  12. Personally, I prefer to give the end-user the ease of downloading a vCard without relying on bookmarklets or browser-specific extensions. A neat trick I discovered is that if you simply link to : http://technorati.com/contacts/<your contact page url>, a vCard will be auto-generated and downloaded for the end-user (provided, of course, you’re using microformats for your contact info).

    (example : http://technorati.com/contacts/http://simplebits.com/contact/ )

    I use this on my own site’s contact page, as well as contact pages for many of my clients.

  13. @Rev. Mitcz: That is a sweet trick! Totally works for my contact page:

    http://technorati.com/contacts/http://chriscoyier.net/contact

  14. @ Chris:
    When I download your vCard from the link you provided, it does DL to my desktop fine, however it won't import into Mac AddressBook at all. Just an FYI.

    I still like the idea of linking an image to the CSS like you described above I just have no idea how to pull this off on a WordPress page.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".