You are reading an article. Lots more of these in the archives. John Allsopp Meet John Arrow

Articles

27Comment Retweet

Microformats: The Quiet Revolution

Oct 21, 2008 In Web Culture By John Allsopp

Imagine a browser that could automatically detect locations, addresses, people, or events; and allowed us to easily add them to our address books or calendars. This vision is quietly becoming a reality. By adopting microformats, not only do you get the practical benefits of a set of well developed conventions for marking up common data, but you'll be helping to fuel the next generation of browser and search engine innovation

Web 2.0? More like Web 1.0.

As many suggest the end of Web 2.0, and others announce the coming of 3.0, if we look at the heart of the web experience for most users, has much really happened since 1995?

By adopting microformats, you’ll be helping to fuel the next generation of browser and search engine innovation.

Despite the rise of CSS, Ajax, and Rich Internet Applications, two key aspects of our web experience are essentially unchanged since the days of Lycos and Mosaic (ask your grandparents if those names aren’t familiar to you!).

Let’s take a look at how this really is the case, how it things could be different, and then see at how microformats can, and are already changing the web landscape, and how you can use them to your advantage in your own projects.

Browsers 1.0

In 1995,what could you do with a web browser? Well,you could visit web pages, print them out, bookmark them. And that’s about all. In 2008 – we can still visit web pages, print them out, bookmark them. And that’s still about all. The role of browsers, and our experience as users is just about identical.

If you think that’s a stretch, here’s a screenshot of the first widely used browser, Mosaic.

Mosaic Web Browser

And here’s its great great grand child, Firefox

Firefox Web Browser

With the exception of the search field, it’s more or less all there on Mosaic.

Search 1.0

The other central aspect of the web experience, one that just about any web user will do several times a day, is search.

Of course, since 1995, several companies, culminating in Google, have dominated search, but the search experience is more or less identical now to the search experience in 1995. Here’s the search experience then and now:

  1. We visit a search engine…
  2. We decide on some keywords for the kinds of pages we want to find…
  3. The search engine returns a list of sites that match our criteria…
  4. We choose a link and click it…
  5. We visit the page.

Now, you might argue that since the browser and search engine as they are have served us well for the last decade or more, then there’s not need to go changing them – “if it ain’t broke then don’t fix it”.

But both browsers and search engines could provide much more functionality to their users.

What if when we visited a web page, our browser recognized locations – addresses, landmarks and so on, and easily allowed us to map them on Google Maps, Virtual Earth or other mapping site? What if the browser recognized people, and let us add them to our address book? Or events, and allowed us to easily add them to our online or desktop calendars?

Similarly, what if a search engine returned results about a movie or restaurant we searched for with an average rating from reviews across the web, no matter whether they are published – in newspapers, on blogs, in forums, or on any other type of site? What if results which contained information about location were displayed on a map, or results that contained information about dates and times were displayed on a calendar?

Search engines could also enable users actions other than simply visiting a site – they could, like the browser examples earlier, let us add events to our own calendars, or contact details to our address books, with no need to visit the page itself to get those details.

We do see some limited examples of this kind of functionality at search sites, but on the whole, we are still very much in the “Search 1.0″ paradigm.

Why is it so?

So, why is it that we’ve seen so little innovation in browsers and search? For one thing, it’s easier said than done. Software is not particularly good at “Natural Language Processing” or NLP (which is basically a fancy way of saying “understanding the written word”). If you think about how most web pages are coded, we don’t markup addresses, or locations, or reviews, or events with any specific HTML to help software more easily extract that information from the page. But if we did have a way of marking up this kind of data, then browsers and search engines could very easily extract it, and provide the sort of functionality we just described.

And hopefully by now you’ve guessed the role of microformats – to provide a way in which we can mark up web pages so that common types of information can be more easily extracted from them by software.

Enter Microformats

So, now we have an idea of what microformats are for, the next question is how do they work? The good news is that If you are a reasonably experienced web developer, familiar with aspects of markup like the class attribute, the abbreviation element, and a handful of other quite commonly used features of HTML, you’ll have very little to learn. Even if you have just a basic understanding of HTML, there’s really not a lot to it. Let’s take a look at an example to demonstrate.

Let’s suppose a site has an address – something like this

<p>1164 Morning Glory Circle</p>
<p>Westport</p>
<p>Connecticut</p>
<p>06880</p>
<p>USA</p>

Let’s now use a very common microformat, ADDR, to mark this up. We’ll discuss ADDR, and where it comes from, after we’ve looked at the example.

First, we’ll want to identify the whole construct as being an address. So, let’s wrap it in a containing div (it’s very likely the address would already be marked up in such a way):

<div>
<p>1164 Morning Glory Circle</p>
<p>Westport</p>
<p>Connecticut</p>
<p>06880</p>
<p>USA</p>
</div>

Now, we’ll add the magic microformats dust – a class value of “adr” to this div

<div class="adr">
<p>1164 Morning Glory Circle</p>
<p>Westport</p>
<p>Connecticut</p>
<p>06880</p>
<p>USA</p>
</div>

This technique of using the class attribute of an element to describe what the element is is one of the key aspects of microformats, and you’ll likely find yourself using it most of the time when working with them.

We’ll now similarly mark up the components of the address using the ADR microformat.

We’ll identify the street address…

<p class="street-address">1164 Morning Glory Circle</p>

… the locality

<p class="locality">Westport</p>

… the region

<p class="region">Connecticut</p>

… the postal code

<p class="postal-code">06880</p>

… and the country.

<p class="country-name">USA</p>

And, altogether we have:

<div class="adr">
  <p class="street-address">1164 Morning Glory Circle</p>
  <p class="locality">Westport</p>
  <p class="region">Connecticut</p>
  <p class="postal-code">06880</p>
  <p class="country-name">USA</p>
</div>

Now, I’m sure many of you are asking, “where did these terms like ‘region’, or ‘postal-code’ come from?” To cut a long story short, microformats attempt as much as possible to reuse existing standards, rather than invent new ones. That way, we increase data interchange, and take advantage of the considerable effort that has gone into developing those standards.

The ADDR microformat is a subset of the hCard microformat, the microformat for contact details, which is based on vCard, the more or less universal format for contact details in address book applications. The terms like ‘region’, and ‘country-name’ all come from vCard.

All microformats work in more or less the same way as this example – they use existing aspects of HTML, like the class attribute, in ways that conform with the HTML standard. And by far the most commonly used aspect of HTML in microformats is the class attribute, a feature of HTML just about any web developer will be familiar with.

Microformats in the real world

Ok, so even if microformats don’t take much effort to learn or implement, is there really any practical value to them? I think there are a couple of very valuable reasons why you should consider microformats.

First, your pages need to be marked up anyway. By choosing an existing format like ADDR, you don’t have to do any work developing your own markup conventions, and your code will be much more maintainable and readable, by virtue of using a common markup conventions. If every instance of an address on your sites is marked up in the same way changing their appearance using CSS will be far simpler.

You’ll be part of a quiet revolution in browsers and search that is already underway.

But beyond this very practical reason, you’ll also be part of a quiet revolution in browsers and search that is already underway.

The examples of what a browser could do with the data in a page we looked at earlier aren’t simply great concepts – they are actually being implemented in browsers today.

There’s an Add-on for Internet Explorer that will recognize microformatted content, like contacts, events and locations in any web page, and display them for the user. Here for example, is my personal site, which lists things like my speaking engagements in the hCard microformat, contact details using hCard, and location using the GEO microformat.

Microformats Add-on for Internet Explorer

The microformats add-on gives me the option of adding an event to one of several on and offline calendars, or contact details to an address book. You can also show any locations in the page on a map.

Microformats on Live Maps on Internet Explorer

The add-on is also available as stand alone JavaScript that you can add to your own site, so that your visitors can access and use your microformatted data in the same way, no matter what browser they are using.

There’s a similar microformats extension for Firefox that provides a set of actions you can perform on microformatted content on any web page you visit with that browser.  This extension, called Operator and created by Michael Kaply, has really led the way in bringing microformats to a wider audience.

Operator Microformats Extension for Firefox

On the search front, Yahoo! SearchMonkey now indexes microformatted content – and provides an API so developers can build their own applications on top of this data. Hopefully this and related innovations from other search engine developers will drive a new wave of search experiences, on top of structured data like microformats.

By adopting microformats, not only do you get the practical benefits of a set of well developed conventions for marking up common data, but you’ll be helping to fuel the next generation of browser and search engine innovation.

Follow the Conversation

27 comments so far. You should leave one, too.

Ryan Cromwell said on Oct 22, 2008

Is there a place which lists or organizes all known microformats? Advertising that list would go a long way to getting people to embed these microformats in their sites.

Thomas Lewis said on Oct 22, 2008

If you go to microformats.org, they list out some of the popular ones on the home page and have a link for more of them which is located at http://microformats.org/wiki/Main_Page.

We are big fans of the site!

Karsten Januszewski said on Oct 22, 2008

Yahoo''s search monkey has indexed MIcroformats and is a great way to find Microformats. For example, here''s a query that finds all hCards on a page:

http://search.yahoo.com/search;_ylt=A0oGkxh1Yf9IU3YBFIdXNyoA?p=searchmonkeyid%3Acom.yahoo.uf.hcard+&y=Search&fr=&ei=UTF-8

You can also pass search terms as well. Here''s a query that searches for all web pages that have an hCard and the word "oomph":

http://search.yahoo.com/search;_ylt=A0oGkxgbYv9IqHQBVStXNyoA?p=searchmonkeyid%3Acom.yahoo.uf.hcard+oomph&fr=&ei=UTF-8

John Allsopp said on Oct 22, 2008

Hi Ryan,

as Thomas mentions, there''s microformats.org

My microformats focussed blog and site also has online and PDF based overviews of all the well used microformats

http://microformatique.com/

HTH

john

Chris Messina said on Oct 22, 2008

@Ryan: specifically take a look at this page:

http://microformats.org/wiki/implementations

Juan Gonzalez said on Oct 30, 2008

Timing on the launch of the toolkit couldn''t be better. While there are plenty of sites out there which support microformats, we need the average user to embrace so content can start to be reused across the web. New extensions on both IE and FF will definitely help boost adoption.

At PlanetEye we are interested in consuming microformatted reviews of travel destinations. I''m sure just like us there will be many other services which will jump at them as soon as the content starts to flow.

L. E. MORGAN said on Nov 12, 2008

Have some knowledge, but just really searching for add-ons to help with new computer right now. The transfer of contacts is what caught my eye. However, don''t see exactly how to do it. Help anyone?

Thomas Lewis said on Nov 19, 2008

L. E. Morgan, sorry for the delay in response. When you install the Oomph add-in, you go to a page with microformatted content like a contact. If one exists, a gleam will display in the top-left corner of your browser. You click on it and it will show you all the contacts on the page. You can then click any of the icons below it to import the contact into Windows Live, GMail, Mobile Me, etc.

Hope this helps.

Angela said on Nov 25, 2008

I am not a very computer literatr person, but it seems to me that ISP providers are losing out. Don''t you think that having a micorformat built in to their browser could break the strangle hold on the competition? Imagine having an opportuniy to buy that kind of technology off the bat and then have an easy tutorial to teach how to use it? Meaning the most inept computer user could learn microformatting while surfing the web, not only would it give the end user managability but give them a sense of satisfaction, ie: "getting what they paid for". Many end users need to use the internet really care not to, or rather cannot appreciate it because its not as "user friendly" as it makes out to be, especially those without an acessible computer environment nearby.

Risotto said on Dec 9, 2008

Microformats are great for new websites, but what about old ones? Who is going to annotate those? Then again, we have an open world assumption in the web, while microformats have a closed view (i.e. only what is specified by the ontologies). While the data is already there, why can''t it be recognized using some kind of business intelligence instead of having to mark it out? Personally I think this just adds another meta layer to the whole system instead of fixing the fundamental problem.

Joshua Allen said on Dec 9, 2008

Hi Risotto,

Thanks for checking this out. I''ve worked quite a bit with the various ways of making the web smarter, and have come to the conclusion that there isn''t one either/or solution -- there are a combination of things. Search engines use machine learning techniques to extract semantics from pages, but they also use KR techniques to extract information placed in the page by the page authors. People who read Doctorow''s "metacrap" post often arrive at the wrong conclusion, and assume that machine learning is less prone to author spam -- when in fact the reason we had to create nofollow tag was because ML systems are equally as spammable.

Note that microformats are specifically a reaction *against* the formal ontological approach of RDF. There is a more subtle point that microformats sit atop existing HTML semantics. IOW, if you need to define a bunch of new markup to define your microformat, then your microformat is less likely to be successful -- the successful microformats leverage semantics that people are alrady using. Of course, you could argue that people should just stop writing HTML altogether, and could just publish all of their documents as GIF or PNG files. That was certainly a common attitude early in the infancy of the web. But we know today that this is absurd -- using POSH (plain old semantic HTML) gives all kinds of benefits. And once you take that step, you are essentially using microformats already.

We have Molly and Nate delivering a workshop track at MIX09 specifically on this topic. When you combine POSH with unobtrusive JS and CSS, the way the web is meant to be built, the result is really magic.

Anthony Fry said on Dec 23, 2008

Do You Think we will soon see antivirus included with broadband package services ?
How do they stop viruses attacking these mobile phones that connect to the internet ?
a possible nice little earner ?

kalimevole said on Jan 5, 2009

There is and other point of view of Web evolution. The evolution of content.

At the beginning we learn how to use the the content at the internet (1.0).
Then we discovered how to generate the content (by the users) - it is 2.0.
And now we learn how to describe (or specify) the content - it is 3.0.

Rohan Cragg said on Mar 30, 2009

One slight problem with the article - I can''t see the images. The URLs are all staging.visitmix.com, I tried one without the ''staging'' subdomain and it works so you might want to fix those...

Hans Hugli said on Mar 30, 2009

Thanks for pointing that out @Rohan. Will look into this.

Joe said on Apr 28, 2009

Hi! I read about the microformats the other day and watched the presentation at mix09. Im desingning the new site for my little company and will be including them, although i am from Mexico and these things are way advance for my country, here you mention vcards or microformats and people say: "Que?" Anyway, i was all morning trying to get the microformats code to work on my spanish version of outlook, had a lot o troble with the "org" and "tel" tags, the info doesnt show on the final file that you open in outlook, but oomph reads it. I think i tried everything on the microformats.org website about that, it beats me what could be wrong. Oomph is really really cool! It was a great morning learning experience! Thanks!

james kairns james kairns said on Dec 25, 2009

I only learned about Microformats today while surfing. I am still not quite sure what the intent is of the uses of this technology but I think I want my PC to have the imdicated facilite. Where and how can I install the software to make microformat available to my browsers.
jamos069

touailia moncef touailia moncef said on Jan 26, 2010

but please

james laxton said on Mar 17, 2010

i hope this thing works

John C Callon John C Callon said on Mar 27, 2010

sercurity needed

Tymm Tymm said on Apr 10, 2010

sweet

diyaliz diyaliz said on May 1, 2010

At PlanetEye we are interested in consuming microformatted reviews of travel destinations. I’m sure just like us there will be many other services which will jump at them as soon as the content starts to flow.

Mohamed Nour Mohamed Nour said on May 13, 2010

Thanks Microsoft.

amber amber said on Sep 13, 2010

just trying to have some sort of phone directory in case i lose/break my phone again. have absolutely no idea what i am doing

Beverly Preston said on Jan 29, 2011

well toolbar is good but i lock up my yahoo.com e-mail how can i unlock it

idmitchell69@yahoo.com said on Feb 12, 2011

yes

maria simmons maria simmons said on Feb 13, 2011

all eyes on u