Microformats: More Meaning from Your Markup

Describing an Event Using Microformats

Second only to information related to people and places, the most common piece of information published online regards events. People are publishing all sorts of time-related information without even realizing it. To help add more semantics to this data, the volunteers at microformats.org created the hCalendar microformat. Much like hCard, hCalendar is based on an existing widely adopted format, iCalendar.

Let's look at an example of a possible blog post:

<p>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

You mightn't think it, but there's a lot of event information hidden away in that simple English prose. Human beings are smart -- we can read between the lines and figure out that the above represents a specific type of event, as well as perceive the time and location of the event. Computers, on the other hand, are stupid -- they have no way of knowing that this is an event; it's just a random piece of text. Adding some hCalendar markup will allow a computer to pick out those important pieces of information as well. Let's have a look at what adding some hCalendar markup looks like:

<p class="vevent">
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

The first step is to add a class of "vevent" -- this addition tells a parser that everything inside this <p> element is data to be considered as related to this event. In the previous hCard example, I used an <li> element. Microformats don't force you to use any specific HTML element, but depending on which element you do use, additional semantics can be implied.

Next, we need to add a summary that describes this event:

<p class="vevent">
Hey everyone,
next week is my
<span class="summary">birthday party</span>,
we should all meet-up at my house for pizza.
</p>

By wrapping the text "birthday party" in a <span> element and adding a class of "summary", we're saying that this piece of text is the summary for this event. We can continue marking up the location in a similar fashion; we'll wrap the location information in a <span> element and give it a class of "location":

<p class="vevent">
Hey everyone,
next week is my
<span class="summary">birthday party</span>,
we should all meet-up at
<span class="location">my house</span>
for pizza.
</p>

Lastly, the most important part of communicating any event is specifying when it will occur! This is one aspect of microformats that exemplifies why they're designed firstly for humans and secondly for machines. As humans we comprehend the meaning of "next week" easily, but computers are not so capable -- we need to give more precise information in order to describe what "next week" actually means.

The ISO date-time standard -- in the form YYYY-MM-DD: a four-digit year, a two-digit month, and a two-digit day -- is used widely in the computer world, but it isn't the most human-readable. Moreover, ISO dates of this form do solve the problem of date ambiguity between American and European dates, but aren't always natural to write. So I found a compromise between machine-readable data and human-readable presentation:

<p class="vevent">
Hey everyone,
<abbr title="2008-05-29" class="dtstart">
next week</abbr> is my
<span class="summary">birthday party</span>,
we should all meet-up at
<span class="location">my house</span>
for pizza.
</p>

By using the <abbr> element and adding a class of "dtstart", we're saying that this data is the date-time start for this event, but the computer doesn't know what "next week" means. Instead, because this is an <abbr> element, the parser can look to the title attribute for an answer to the meaning of "dtstart". There it finds the ISO date. If you're wondering why I chose the <abbr> element, you can find more information about it here.

Once the information has been encoded into the text, it can easily be extracted and exported to various calendaring applications: sent locally to the computer or phone, or to remote web-hosted calendars, or shared with friends, or even distributed among mashups that are yet to exist!

So How Can I Get Started with Microformats?

There are several tools out there that you can use to both help you create microformats and extract them usefully.

The hCard creator is a web-based form that you fill out -- this dynamically generates the HTML that you need to paste into your web page. Similarly, there is an hCalendar creator. There are also libraries and plugins for Dreamweaver, Textpattern, WordPress, and many, many more on the microformats hCard and hCalendar web pages.

But what good does it do you to publish microformats if you can't extract them? Well, there are plenty of tools to help you to extract and manipulate microformat data.

There's a Firefox plugin called Operator, which detects microformat content within the currently viewed web page and provides relevant options and tools. For example, if hCard content is detected, Operator will list the contact names and present an "export contact" option. This plugin is used in the example screenshots below. Operator is very handy because it not only extracts the data, but also alerts you to the presence of data on the page.

Technorati hosts microformat web services for hCard and hCalendar. If you submit the URL of a web page containing hCard or hCalendar information, this web service will return the vCard or iCalendar equivalent. Technorati is also currently testing a microformats search engine. If your site's listed in the Technorati index, they index any microformats that are found in your HTML. This data then become searchable. Eventually, you could have a tailored iCalendar subscription of only events in your city with keywords like "jazz" or "tech" or "Frisbee;" the Internet becomes your database. This is the first step toward that semantic search that has been a vision of so many, for so many years.

There are libraries written for various programming languages to help you extract the microformats data from HTML for your web applications:

• MoFo for Ruby
• Sumo for JavaScript
• X2V in XSLT
• hKit in PHP
• Text::Microformat for Perl