The Basics of Microformats: A Short Tutorial

Microformats: marking up HTML markups. What did you expect? It’s only natural that the world-at-large has progressed from wanting a Contact Page on your website to wanting that Contact Info automatically organized and downloadable. Don’t hate the Internet surfer, hate the Internet.

Luckily, microformats are easier to understand than what microformats.org would have the non-web developer believe. Let’s start with a definition from microformats.org:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

And that’s all you need to know! ….Kidding. What they meant to say was, a microformat is a markup to an existing HTML/XHTML tag that presents metadata, or ‘data about data contents’. This additional metadata can be read by applications to get the end-user a more specific match to whatever it is they are looking for. Referring back to Contact Pages, HTML allows Google to produce your contact page as a search result because your HTML has included the word “contact” somewhere on the page or in the title. A microformat, allows Google to read the contact information ON that contact page and automatically present a vCard as a search result. (What’s a vCard? Click here.)

In short, traditional (X)HTML markup tags organize and display information on the web, but a microformat can interpret and describe what the information means. But it should be noted that these “rich snippets,” as they’re called, are fairly new and applications are still learning and being modified to read them. A note from Google’s page on microformats states: “Marking up your data for rich snippets won't affect your page's ranking in search results, and Google does not guarantee that markup on any given page or site will be used in search results.” But give it a couple years, and it’ll be imperative to have them on your sites when your competition’s appearances in search results are more relevant than your own.

Microformats are written by anyone brave enough to contribute to the unregulated, open wiki at microformats.org. There, developers have shared how they’ve added markup attributes to encode and extract events, contact information, social relationships, news content, resumes...here’s a list from Wikipedia of microformats currently being used:

• hAtom – for marking up Atom feeds from within standard HTML
• hCalendar – for events
• hCard – for contact information; includes:
  • adr – for postal addresses
  • geo – for geographical coordinates (latitude, longitude)
• hMedia - for audio/video content
• hNews - for news content
• hProduct – for products
• hRecipe - for recipes and foodstuffs.
• hResume – for resumes or CVs
• hReview – for reviews
• rel-directory – for distributed directory creation and inclusion
• rel-enclosure – for multimedia attachments to web pages
• rel-license – specification of copyright license
• rel-nofollow, an attempt to discourage third-party content spam (e.g. spam in blogs)
• rel-tag – for decentralized tagging
• xFolk – for tagged links
• XHTML Friends Network (XFN) – for social relationships
• XOXO – for lists and outlines

Now a quick example to drive the point home. Let’s talk about the hCalendar microformat, short for HTML iCalendar. This microformat marks up event info so that the details can be extracted and read by browser-adds or downloaded into desktop calendars.

Here’s the text you might be putting on a landing page for an upcoming event:

The Microformat Coffeehouse Rave will be held on October 27, 2011 from 8-9am at hCal Cafe. Click here to RSVP.

The HTML markup would look something like this:

<p>The Microformat Coffeehouse Rave will be held on October 27, 2011 from 8-9am at hCal Cafe. <a href=”http://microrave.com”>Click here to RSVP<a></p>

Using span HTML elements and the classes vevent, summary, dtstart (start date), dtend (end date), location and url the microformat markup would look like this:

<p class="vevent">
   The <span class="summary">Microformat Coffeehouse Rave will be held</span>
   on October 27, 2011 from
   <abbr class="dtstart" title="2011-10-27T08:00:00-06:00">8</abbr>-
   <abbr class="dtend" title="2011-10-27T09:00:00-06:00">9</abbr>am at
   <span class="location">hCal Cafe</span>
   (<a class="url" href="http://microrave.com">Click here to RSVP</a>)
</p>

And once you’re feeling really brave, you can use even more class names to pimp out your microformat: http://microformats.org/wiki/hcalendar-cheatsheet

So that’s a quick and dirty microformat tutorial. We’re still learning all this ourselves, but truly believe microformats are yet another piece of the Internet of the future. Plus, your customers and clients will be appreciative of the relevant information, concisely organized in the format most useful to them.

Happy formatting!

Comments

[Brandon Orndorff]

Great post, microformats.org was confusing me a bit and I am a web developer. Thank you for the detailed explanation and informational post. You are a Rock Star!