Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Microformats: Managing Personal and Event Data

Last updated Oct 17, 2003.

By Molly E. Holzschlag

Most of us want to keep our personal information, as well as our friends’ contact info, up-to-date. We also appreciate a quick-to-download event view of conferences we're attending. These time-saving tools are part of the reason we find computers so helpful in our day-to-day lives.

As Web designers and developers, however; we're challenged by the myriad tools that people rely on to manage this type of data. For example, if we want to use vCards on our sites, we've historically had to go the extra distance and provide the contact information we want to make available to our site visitors in the vCard format, which could then be downloaded into our respective mail and calendar clients.

In the past, if we used vCard and vCalendar on the Web, it added layers of extra work to any project. We’d have to create the files, integrate them with our XHTML, and maintain them.

But when you think about it, the contact information and calendars are already right there on the site, so why go to such extra lengths if we don't have to?

Microformats offer us relief from having to take these extra steps. By extending the markup that's being used to describe our contact and event information within our XHTML and content, we can then parse that information from the Web document into the appropriate format for our address book and calendar software.

Web-Based vs. Non-Web Technologies

In order to fully appreciate the value of microformats in this context, it's important to first understand that technologies such as vCard and iCalendar are not specific to the Web.

These formats are data that as such, aren't immediately available to the Web user via the browser itself. A vCard, for example, is kept in a separate file, requires a new URL from the current page to access, and must also be sent via a different MIME type.

Compare this to Web-based data, which is that data included within a Web page. In microformats, the vCard alternative is hCard. In the case of hCard, all the content is right there in your Web page, marked up semantically using XHTML.

No need for extra files, extra queries, and different MIME types. Just add the proper microformat markup to the document, and all the information is now reusable in myriad ways and can be transformed as required.

vCard and hCard

Many readers of this article are likely to have a vCard set up in their email software. Microformats allow us to make this information available in our Web pages, too.

If I were to create a vCard to make available via my Web site using the vCard format itself, I'd have to prepare the vCard document as follows:

BEGIN:VCARD
N:Holzschlag;Molly;;;
FN:Holzschlag Molly
ORG:molly.com;
EMAIL;type=INTERNET;type=WORK;molly@molly.com 
END:VCARD

This document would then be saved separately and reside at a separate URL. I would then link to it from my Web page, which would allow people to then click the link and have the vCard information added to their vCard-enabled address book.

The microformats alternative to this for Web-based applications is to use hCard. With hCard, you’d merely add the appropriate class values to the markup surrounding your contact information as follows:

<div class="vcard">

<span class="fn">Molly Holzschlag</span>
<span class="org">Molly.Com, Inc.</span>
<span class="email"><a class="value" href="mailto:molly@molly.com">molly@molly.com</a></span>

</div>

Because this is XHTML, I can mark up my hCard as I see fit, except where the class attribute values are concerned. It's the common attribute values that make up a microformat, so using the proper class values in this case is imperative. Otherwise, you can mark up the information as it makes the most sense for your needs, such as in a biography:

<div class="bio vcard">
<h3>About Molly</h3>
<p><span class="fn">Molly Holzschlag</span> is an author, instructor and Web designer and president of <span class="org">Molly.Com, Inc.</span>. She can be reached, where else? <span class="email"> <a class="value" href="mailto:molly@molly.com">molly@molly.com</a></span>.

</div>

As you can see, the information that is already in your Web page is now marked up in a more detailed, semantic way so that people using the appropriate tools can get to the information.

iCalendar and hCalendar

Along with the common contact information we can make available via hCard, another very useful microformat is hCalendar, which allows us to take event information and mark it up right in our event page, readying it for instant download to a site visitor's calendar software.

Just as vCard requires an external file and must be sent via a different URL and with a different MIME type, so does iCalendar information. An iCalendar example of an event would be:

BEGIN:VCALENDAR
BEGIN:VEVENT
SUMMARY:Extreme Standards
DTSTART:20060926T080000Z
LOCATION: University Hall
DTEND:20060926T173000Z
DESCRIPTION:Understanding structure, semantics and style
END:VEVENT
END:VCALENDAR

But, since I'm already going to have this information in my HTML document, I might as well go ahead and use the hCalendar microformat to mark up my event information:

<div class="vcalendar">

<div class="vevent">
<div class="summary">Extreme Standards</div>
<abbr class="dtstart" title="20060926T080000Z">September 26th, 2006, 8AM</abbr>
<abbr class="dtend" title="20060926T173000Z ">5:30PM</abbr>

<div class="location">University Hall</div>
<div class="description">Understanding structure, semantics and style</div>
</div>
</div>

Once again, the markup you use depends on your semantic needs except where the hCalendar microformat attribute values are needed. You'll notice that in the case of hCalendar, we’re not only using the class attribute, but we’re also using the title attribute within an <abbr> element to include our date and time information.

Okay, Great. So, Now What?

The role of microformats is very straightforward. Instead of having to do all the extra work of preparing data in vCard or iCalendar format, we simply use the corresponding microformat directly within our markup. This makes our information far more flexible, useful, and reusable through a variety of means.

OK. So the information is there and it’s properly marked up with the given microformat. The obvious first question is, "How do I get it from the Web page into my address book or calendar software?"

There are a variety of user tools—including browser bookmarklets and plug-ins—that allow the parsing of microformats. There are also tools that we can use to provide the same functionality for our site visitors. Typically, these tools are written in PHP, Ruby, and Greasemonkey. And, as in the case of X2V from Brian Suda, XSLT can also come into play.

X2V takes an XHTML file with hCard or hCalendar, parses the microformat information, and transforms it into the vCard or iCalendar format respectively. This enables me to click a link and have the information be immediately downloaded to my default software for that format (Figure 1).

Style, Reusability and Flexibility

Microformats, such as hCard and hCalendar, reduce the amount of work we as developers and designers have to do by keeping all of the code and content in one place: The XHTML document. In the past, multiple documents, server queries, and configurations would be required to send vCard and iCalendar data over the Web.

It's easy to see, via these examples, how using microformats is truly extending our XHTML and content. We can style it any way we want, use that content again for other applications, and update the content as we see fit without having to update multiple files. We get the same great results, but with a lot less hassle, which I'm sure we all can agree is a desirable goal.