Using Microformats

We all use the Web for different things whether it’s to check bank statements, check the weather forecast or book concert tickets.  We do all these things relatively easily by interpreting and processing information on web pages represented by natural language, graphics, multimedia and the design and layout of the page.

Information presented in this way allows us to make associations, deduce facts and combine data gathered from a variety of resources. Many of our tasks online require us to collect information from a number of sites and combine this data to use to our advantage.  For example if you wanted to book a last minute holiday to Spain, you may need to visit one site to obtain the local weather forecast, one to book your hotel, another to book your flight and perhaps several others to plan activities for your holiday. We as people can carry out these tasks and combine the information collected easily. However if we asked a computer to do the same type of task online it simply would not be able to complete the request. Computers would not know where to start looking for information about holidays, flights and activities in Spain. This is because current web pages are designed to be read by people rather than computers.  If computers could search the web for the local weather forecast in a particular region in Spain, find a hotel in that region on the dates required, and also find a flight to the area, combine all this information automatically and provide the user with a list of results, would this not save a huge amount of time and effort spent online? The answer is of course yes. But how can computers interpret information on web pages designed for people? One solution quickly gaining popularity is Microformats.

What are Microformats?

Microformats are a ‘set of simple, open data formats built upon existing and widely adopted standards such as XHTML. Microformats add machine readable code to existing web pages without altering the visual display of the page, meaning they can be interpreted by both people and computers. Microformats have been developed for the most common types of data available on the web such as calendars and events (hCalendar), people and organisations (hCard), opinions, ratings and reviews (VoteLinks, hReview) and licenses (rel-license). Sites which implement Microformats would allow people to drag or add information from that web page straight into other applications like calendars and address books. Microformats also allow central services to index particular types of content better, such as reviews. For example, you can search for reviews of French white wine on Technorati.

How to implement Microformats on your site

Taking the previous example of booking a holiday, adding Microformats to holiday information on a website is a simple process.  Imagine a travel website lists a range of holidays to Spain, Microformats can be added to each holiday using the hCalendar Microformat. Holidays are displayed as: 3* holiday in Benidorm – 7 nights from 21st August to 29th August – half bored £374.00 – Benidorm, located about 45kms northeast of Alicante, just south of Altea is one main attraction along the Costa Blanca. Despite its skyscraper skyline, it stands for beach and lots of Benidorm nightlife. The HTML including specific Microformat tags and classes for the holiday would be:

<ul>
    <li>
        <p>
            <a class=”url” href=”#”>
                <span>3* holiday</span>
                in <span>Benidorm</span>
            </a>
            for 7 nights departing on
            <abbr title="20060821">21st August</abbr>
            and returning on
            <abbr title="20060830">29th August</abbr>
            for &pound;347.00.
        </p>
        <p>
            Benidorm, located about 45kms northeast of Alicante,
            just south of Altea is one main
            attraction along the Costa Blanca.
            Despite its skyscraper skyline,
            it stands for beach and lots of Benidorm nightlife.
        </p>
    </li>
</ul>

In the example above the hCalendar Microformat is defined using the class of ‘vevent’.  In this holiday example there would be more than one holiday listed so the ‘vevent’ class has been added to the <li> tag.

<li class=”vevent”>

The first piece of information included in the Microformat is the summary of the event.  In this example the summary is ‘3* holiday’.  This is defined using a class of ‘summary’ in the HTML.

<span>3* holiday</span>

The second piece of information is the location of the event. This is identified by using the class ‘location’:

<span>Benidorm</span>

Next the start and end dates and times for the event are listed. These have been marked-up using the <abbr> tag with a class of ‘dtstart’ for the start date and ‘dtend’ for the end date.  Within the <abbr> tags we include a title attribute which value includes the date written as ‘20060717’.

<abbr title="20060821">21st August</abbr>

Lastly there is the description of the event. This is marked-up using <p> tags and a class of description.

<p>Benidorm, located about 45kms northeast of Alicante,
 just south of Altea is one main attraction along the Costa Blanca.
Despite its skyscraper skyline,
 it stands for beach and lots of Benidorm nightlife.
 </p>

The finished Microformat would display on a web page as:

  • 3* holiday in Benidorm for 7 nights 21st August and returning on 29th August for £347.00.Benidorm, located about 45kms northeast of Alicante, just south of Altea is one main attraction along the costa blanca. Despite its skyscraper skyline, it stands for beach and lots of Benidorm nightlife.

The Benefits

The main benefit of Microformats is they are very simple to use.  They are not a new computer language, instead they build upon existing standards using HTML tags and attributes to add meaning to information on web pages. Anyone with a basic knowledge of HTML can add Microformats to their web pages.  HTML tags such as ‘abbr’, ‘address’, ‘cite’ and ‘blockquote’, along with attributes such as ‘rel’, ‘rev’ and ‘title’ are used to add Microformats to web pages. These tags and attributes along with specific classes form the machine readable information in HTML which search engines and other applications can interpret and process.

CSS

As specific tags and classes are used to create Microformats on webpages, it is possible to use the classes and tags to style Microformats without adding any extra mark-up.   This is a CSS example for styling Microformats:

.vevent {
  list-style-type: none;
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  border-color: #BFE6ED #9CCFD9 #9CCFD9 #BFE6ED;
  width: 60%;
  padding: 0;
  background: none !important;
}

.vevent p {
  margin: 2px;
  padding: 10px;
  line-height: 1.6em;
  font-size: 110%;
}

.vevent .description {
  background: #DCF0F4 url(icon.gif) -15px 5px no-repeat;
  padding-left: 35px;
  font-size: 90%;
}

.vevent .url {
  font-size: 150%;
  display: block;
  margin-bottom: 8px;
  color: #0066CC;
}

abbr {font-weight: bold;}

Using Microformats

Once a Microformat has been added to a web page, how do people and computers use that information? When people view a web page containing information marked-up with Microformats it will not necessarily appear visually different to viewing the page without additional Microformat specific HTML.  For people to effectively use information in Microformats an extra plugin for the browser is currently required. Firefox web browser users can download a free extension called Tails Export for showing and exporting Microformats.  This installs a Microformats logo in the bottom right corner of the browser which highlights pages containing Microformats. Selecting the highlighted logo loads all the Microformats on the page into a sidebar. For hCard and hCalendar Microformats a ‘show’ and ‘export’ button will be displayed in the sidebar, allowing users to view the information or export it to a calendar application, see Figure 1. hCalendar Microformats shown in the Tails Export sidebar in Firefox Figure 1: hCalendar Microformats shown in the Tails Export sidebar in Firefox Another tool to extract Microformats from a page is X2V.  X2V is a server tool which automatically transforms pages with Microformats into the corresponding regular format.

Summary

Microformats allow computer readable information to be added to web pages where information currently can only be interpreted by people. Allowing computers to process and interpret information on web pages will ultimately benefit everyone as computers will be able to complete mundane tasks automatically, saving you time and effort when browsing the web.