Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.

Please upgrade to a better browser such as Firefox, Opera, Chrome, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)

Microformats Outline


What is the Semantic Web? What’s Web 3.0?

What’s HTML?

Less than 50 tags → lots of meaning (that is, semantics) gets lost when marking up documents.


<h1>VanDev: Microformats - Adding Semantics to Your Web Site</h1>

<p>Wednesday, April 16, 2008  <br>

UBC Robson Square<br>
800 Robson St.<br>
Vancouver, British Columbia<br>

HTML tags such as h1 (heading1) and p (paragraph) and br (break) are kind of meaningless (without semantics).

Semantic Web – Web 3.0

Semantic Web – add semantics to your web page by marking up events, people, locations, resumes, listings, feeds and much more.

How? The “official” semantic web proposes new extension to web markup such as Resource Description Framework(RDF) or eXtensible Markup Language (XML)

The “pragmatic” semantic web proposes – let’s just use conventions and best practices for today’s web markup and today’s browsers.

Semantic Web Example Using Microformats

Let’s add semantics using Microformats to the event example:

<div class="vevent">
  <h1 class="summary">VanDev: Microformats - Adding Semantics to Your Web Site</h1>

  <p><abbr class="dtstart" title="2008-04-16">Wednesday, April 16, 2008</abbr>

That’s all there’s is to it.

Why use attributes such as vevent, summary and dtstart?

Microformats build on existing standards! The event Microformat known as hCalendar builds on the existing internet standard called iCalendar (used by Apple’s iCal and others) published by the Internet Society/Internet Engineering Task Force (IETF) as Request for Comments (RFC)#2445.

The same event marked-up in “classic” iCalendar format looks like:

PRODID:-//VanDev//NONSGML Calendar Version 1.0//EN
SUMMARY:VanDev: Microformats - Adding Semantics to Your Web Site

Now Microformat parsers in Ruby or JavaScript or built-into the browser (such as in Firefox 3) or using a browser plugin (such as in Firefox 1.x/2.x) can find out more about the event and offer mashup services such as export to your calendar, etctera by simply reading (and parsing) the web page.

Who’s using Microformats?

How do I know? Let’s try some mashups using Microformats.

Firefox Microformat Browser Plugins

What’s Operator?

Operator is a free, open source Firefox browser addon that lets you interact with semantic data on web pages, including Microformats, RDFa and eRDF.

Operator Actions / Mashup Samples

Microformat Mashups Demos

  1. geo Microformat + Google Maps
  2. rel-tag Microformat + Flickr
  3. hCalendar Microformat + Google Calendar
  4. hCard Microformat + Contact Adress Book Export/Import

Mashup #1 w/ Maps – Geo Microformat

Flickr 2.3 million photos geotagged this month

Many more:

Behind the scenes – Geo Microformat Code

<span class='geo'>
   <span class='latitude'>49.205486</span>
   <span class='longitude'>-122.892036</span>

Alternative geo Microformat:

<abbr title="49.205486;-122.892036" class="geo">
  North Vancouver's Lynn Canyon

Yes. That’s it. That’s all. A real-word geo microformat from Flickr (a Yahoo! service).

Mashup #2 – rel-tag Microformat Demos

Mashup Actions for microformats tag:

Behind the scenes – rel-tag Microformat Code

<a href="" rel="tag">microformats</a>,
<a href="" rel="tag">giantglobalgraph</a>

Yes. That’s all, hence, the name rel-tag!

Mashup #3 – hCalendar Microformat + Google Calendar

Demo Tails Export – Click on HTML

Mashup #4 – hCard Microformat + Contact Adress Book Export/Import

Create a hcard sample using hcard creator and save it to your disk

Microformats and REST

REST – Best practices for existing protocols and formats

Microformats → Best Practices for HTML (Add Semantics to web pages using today’s browsers)

Microformats and Ruby – What is Mofo?

Mofo – Ruby Microformat Parser Project @

  1. Getting Started w/ Mofo (see Online Tutorial)
  2. Try hcard – create hcard using hcard creator and parse it using mofo

More Microformats and Ruby Links

Article: Me and uformats (Microformats) – err.the_blog (Chris Wanstrath) @

Creating RESTful web services using Microformats

Turn your web page into an API.

Instead of asking for the user’s address, ask for a web page (URL/URI) and use Microformats to get the address.

Instead of asking for the event details, ask for a web page (URL/URI) to includes all the event details marked up using Microformats.

Subscribe to an event, contact card using a web page (similar to a web feed) and the event, contact card stays up-to-date.

Microformats in a way is a “legalized” and standardized way for screen scrapping.

The Ruby Mofo library is – surprise, surprise – built on Hpricot.

Microformats Line-Up

The rel family (link rel=relationship attribute)

<a href="" rel="license">
  Create Commons Attribution Non-Commercial 3.0</a>
<a href="" rel="met colleague">
  Gerald Bauer's Blog</a>

Microformat Support Built Into Firefox 3

JavaScript API – Intro @

That’s it – Thanks – Questions?