What are Microformats? 4

A Microformat is a bit of syntactic HTML and CSS for the purpose of making data on your webpage readable by both humans and machines.

There are currently four popular and well-defined microformats:

  • hCalendar – a description of time based events
  • hCard – business card style information about a person
  • hReview – used to represent reviews of movies, books, and more
  • XFN – Xhtml Friend Network, representing social relationships thru hyperlinks

Here’s a technical example of an hCalendar microformat:


<abbr class="vevent">
<a href="http://www.nuggetshoops.com" class="url">
http://www.nuggetshoops.com/</a>
<span class="summary">Denver Nuggets Playoff Game</span>:
<abbr class="dtstart" title="2007-04-28T018:00:00-07:00">
April 28 from 6:00pm MDT</abbr>-
<abbr class="dtend" title="2007-04-28T021:00:00-07:00">9:00pm MDT</abbr>,
at the <span class="location">Pepsi Center, Denver, CO</span></abbr>

Which produces this microformat:

http://www.nuggetshoops.com/
Denver Nuggets Playoff Game:
April 28 from 6:00pm MDT-
9:00pm MDT,
at the Pepsi Center, Denver, CO

4 thoughts on “What are Microformats?

  1. Pingback: Amped about Web Standards » Tutorial: Using hCalendar Microformats

  2. Pingback: Virtual Hosting Blog » Microformats University: 100+ Articles and Resources

  3. Reply Andy Mabbett Jun 18, 2008 4:19 AM

    For a discussion of accessibility problems with the (ab)use of ABBR shown above, see http://www.webstandards.org/2007/04/27/haccessibility/

  4. Reply alan Jun 18, 2008 11:53 PM

    Andy – thank you very much for that link. I’m going to rework the above example based on what I read tonight in that thread. I’ll also go thru my other code samples posted here to see if I they need to be updated based on the latest developing standards.

    Although I’m nowhere near the frontlines when it comes to fighting for web standards and accessibility, I try to keep the principles in mind when I develop web applications, and I don’t want people to inadvertantly read about an outdated approach if they come across my website.

Leave a Reply

Get Adobe Flash player
%d bloggers like this: