Get Acquainted with Microformats

Revision as of 23:42, 27 May 2008

Perhaps the most difficult part of microformats is explaining what they actually are. The short answer is that microformats are a way of adding semantic meaning to HTML tags. The newly marked-up HTML becomes more valuable to browsers and other applications.

Tantek Celik, chief technology officer at Technorati and creator of microformats, describes them as a way of "making web pages both more useful and more usable to the average person."

As support for microformats grows, your browser will interpret certain types of data differently than it does today. It will translate information from something it can read to something it can understand.

Say you post a calendar event with microformatting. Your browser can take that information and save it to your desktop calendar. Mark-up your online business card in microformatting and your browser can automatically save it to the user's address book.

This isn't anything that downloadable browser enhancements couldn't do before. The genius of microformats is, similar to .txt, .rss, .html, or even .mp3 file formats, they are standardized. In other words, you can use the data with any program or device of your choice. Microformats allow you control of your data and freedom from the restrictions of proprietary social networking applications or third-party extensions.

What Microformats Do

Right now your data is spread across the internet, photos on [Flickr], friends on Facebook, bookmarks at ma.gnolia, calendar on Google Calendar</a> and so on. Microformats can make it easier to track and aggregate that data into one centralized space -- your own domain, a blog or perhaps your personalized homepage.

In many ways microformats have the potential to replace web-based APIs. It can make data that was once only available to those with programming skills available to anyone who knows a bit of HTML.

And it isn't just people, search engines can use microformats to provide better results. "By marking up contacts with hCard, events with hCalendar, reviews with hReview, listings with hListing, search engines will be (and are) able to find that information on those sites better," Celik says.

Instead of guessing what information is on the page, microformats can tell search engines exactly what data they are looking at. For instance, as Celik points out, "rel-license, the microformat for license links, is parsed and supported by Google and Yahoo's license/CC search." And rel-tag is supported by Technorati and others for browsing tagged blog posts.

Usage Overview

The basic example used to illustrate the power of microformats is the hCard format. An hCard accomplishes the same thing a vCard does -- click on an hCard on somebody's web page and you can add that person to your address book in an instant.

The hCard format is probably the most widespread of all microformats, the hCard standard is already in use on contact and profile pages around the web, heck even Steve Martin has one -- yes, that Steve Martin.

Another excellent example of the way microformats can make your life easier is the hCalendar format. The popular social networking music site [last.fm] is one of many sites that encode calendar events in hCalendar format making it easy to add events to your calendar.

Click on an event and it gets added to your hCalendar-compatible calendaring application. Most web calendars and desktop calendars have support for these microformats.

Another, arguably more powerful, application of microformats is the hListing microformat. Imagine you want to sell something on the web; you could head to an auction site, create an account, list your item and post the information. But why bother with all that when you could just post your item on your blog using the hListing format?

Sites like Edgeio can scrap hListing data and aggregate it to a larger community which can then bid to you directly, without the hassle of creating and listing an item on multiple sites.

Real World Example

To get started with microformats let's consider the most basic example, the rel="tag" format. Many people are probably already using this without even realizing it's a microformat. The syntax is simple, start with an ordinary link tag like this:

<a href="http://mysite.com/wine/" title="my thoughts on wine">wine</a>

Now if we just add one additional attribute we'll have a microformat that tells search engine spiders that our link is to a page (at least partly) about wine.

<a href="http://mysite.com/wine/" title="my thoughts on wine" rel="tag">wine</a>

The only thing to note is that the url determines to tag, not the link text. in other words:

<a href="http://mysite.com/wine/" title="my thoughts on wine" rel="tag">beer</a>

would be read as a link to the tag wine, **not** beer.

So far so good, how about something more sophisticated. Let's give hCard a try. Here's some example code:

    <div id="hcard-Scott-Gilbertson" class="vcard">
        <a class="url fn" href="http://blog.wired.com/monkeybites/">Scott Gilbertson</a>
        <div class="org">Wired News</div>
        <a class="email" href="mailto:scott_gilbertson@wired.com">scott_gilbertson@wired.com</a>
        <div class="adr">
            <div class="street-address">3rd Floor, 520 Third Street</div>
            <span class="locality">San Francisco</span>,
            <span class="region">CA</span>,
            <span class="postal-code">94107</span>
            <span class="country-name">USA</span>
        </div>
    </div>

And here's what it would look like rendered in a browser:

If writing the code yourself is too laborious there's always the hCard creator. In fact nearly all of the more complicated microformats have code creators that take your input and spit out some cut-and-paste code you can drop into your site.

Popular Microformats

A list of common microformats:

• People and Organizations: hCard
• Calendars and Events: hCalendar
• Opinions, Ratings and Reviews: VoteLinks, hReview
• Social Networks: XFN
• Licenses: rel-license
• Tags, Keywords, Categories: rel-tag
• Lists and Outlines: XOXO

A complete list of microformats can be found on the microformats wiki.

For more examples and an in-depth look at various microformats see our more detailed tutorials on hCard and XFN.

Support for Microformats

Eager to get ahead of the curve? The following browsers and extensions currently support microformats.

Firefox Support Firefox 3 provides an API for microformat support, but currently has no user interface. The following add-ons feature microformat support.

• Greasemonkey script (uses Greasemonkey extension)
• Microformats Bookmarklet
• Operator Extension
• Tails Extension
• AlchemyPoint Extension

Internet Explorer Support The upcoming release of Internet Explorer 8 is rumored to support microformats.