Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Microformats: The Art of Markup: hCalendar

Last updated Oct 17, 2003.

By Andy Clarke

Even for the most seasoned web professional, authoring mark-up using microformats will encourage you to approach your mark-up from a content-out perspective, enabling you to create ever more meaningful, content-rich documents.

In the previous article in this series, I explained how to define contact information more precisely and, in turn, help make contacting people and organizations easier for other people by using microformats. In this article, you will learn how to use the hCalendar microformat to add rich meaning to events—such as concert dates on the web site of the fictitious ska band, The Nonsense Robots. You'll also learn how to extend the meaning of one of today's most vilified HTML or XHTML elements; the table.

Before we move on, take a look at the final result that you'll be working toward in this article. On the surface, you'll see a simple page of content, but one on which you'll be able to use your knowledge of microformats to the full.

Figure 1

Figure 1. Touring with The Nonsense Robots. Design copyright Andy Clarke.

Introducing Events and hCalendar

In much the same way that we publish contact information about people, companies, and organizations, we also regularly publish information relating to events, whether formal or informal, and often without realizing it.

Take a look at the next paragraph and count how many pieces of event-related information it contains.

The Nonsense Robots will be entertaining audiences next on September 1st 2008 at 8 pm. Located within 60 minutes drive-time of 11.4 million people, MEN Arena was built alongside Manchester’s Victoria Station by Vector Investments, with direct access to a hub of public and private transport services and adjacent to a 1,500 capacity multi-story car park.

You should have spotted that this paragraph contains three important pieces of information relating to an event—its date and start time, plus the venue. While it's easy for humans to identify this content, it's not as easy for a machine to recognize amongst the other strings of characters. Although there is no particular mark-up to identify event information, you can give both people and machines a helping hand by defining the precise meaning of event information using the hCalendar microformat.

Like other microformats, hCalendar takes an existing standard, in this case the schema for iCalendar, and expresses it in HTML or XHTML through a set of precise attributes and values. For the paragraph above, those values are:

  • Event start date and time, expressed using dtstart
  • Venue, expressed as location

Our concert event also includes:

  • A title, expressed as summary (rather than event-title or name as you might first expect)
  • Contact information, including an address, telephone number, and the URL of the ticketing agent

Adding Your First Event

Starting with the first paragraph, and working from the content out, you should first add the summary, followed by the specific hCalendar attributes and values for the start date (dtstart) and venue (location).

<p><span class="summary">The Nonsense Robots will be entertaining audiences next on <abbr title="20080901T20:00" class="dtstart">September 1st 2007 at 8pm</abbr></span>. Located within sixty minutes drive-time of 11.4 million people, <span class="location"><abbr title="Manchester Evening News Arena">MEN Arena</abbr></span> was built alongside Manchester’s Victoria Station by Vector Investments, with direct access to a hub of public and private transport services and adjacent to a 1,500 capacity multi-storey car park.</p>

As it is important to make buying tickets for this event as easy as possible, it makes sense that you should add the contact information for the ticketing sales agent using the hCard schema that you learned about in last month's article.

<div class="vcard contact">
<h3>Tickets available from</h3>
<span class="fn org">MEN Arena Manchester Box Office</span>

<span class="adr">
<span class="locality">Victoria Station, Hunts Bank, </span>
<span class="region">Manchester, </span>
<span class="postal-code">M3 1AR</span>

<span class="country-name"><abbr>UK</abbr></span>
</span>
<span class="tel">0844 847 8000</span>
<a class="url" href="http://www.men-arena.com/">

http://www.men-arena.com/</a>
<a href="#" id="vcard" title="Download vcard">Download vcard</a>
</div>

Notice that on the division with a class or vcard, there is a second attribute value of contact. This value denotes that the contact information relates to this particular event.

You should now group your elements inside another division, this one with an attribute value of vevent, to complete this simple event.

<div class="vevent">
...
</div>

As this event is only one in a series of concerts on the tour, you should enclose it within an additional content division with a class of vcalendar; to make it explicit that this division is the root element of your emerging calendar.

<div id="content" class="vcalendar">
<div class="vevent">

...
</div>
</div>

Mark-up containing microformats has so many elements and attributes for binding a design to a document using CSS that your choices for style are almost limitless. For this design, you will use CSS positioning to display the contact information on the right of the event information paragraph.

#content > div { position : relative; }
#content p { margin-right : 260px; }

#content > div .vcard { 
position : absolute; 
top : 0; 
right : 0; 
width : 220px; 
padding : 15px; 
background-color : #2a2024; }
Figure 2

Figure 2. Completing the first event. Design copyright Andy Clarke.

With the most immediate event now under your belt, it is time for you to turn your attention to the other concerts that make up The Nonsense Robots' busy touring schedule. Here you will use what is perhaps the most dejected of all the HTML or XHTML elements: the table.

Rehabilitating Tables

I am assuming that you have long since left behind your abuse of the table element to create your page layouts. However, I hope you haven't abandoned them altogether. When you use tables for their original purpose of presenting two-dimensional tabular information, they provide a rich source of semantics. Start by adding the basic elements to your table, tr, th and td rows and cells.

<table>

<tr>
<th>Venue</th>

<th>Date</th>
<th>Location</th>
</tr>

<tr
<td><strong>The Nonsense Robots at</strong> Carling Academy Brixton, UK</td>

<td>Sep 2nd 2008</abbr></td>

<td>
Carling Academy Brixton Box Office 
211 Stockwell Road,
London,
SW9 9SL
UK
07771 3000
http://www.brixton-academy.co.uk/
</td>
</tr>

</table>

Using the Scope Attribute

On two-dimensional data tables such as this, when you add the scope attribute to table headers you create a clear relationship between those headers and the reading direction of the cells that they describe.

<tr>
<th scope="col">Venue</th>
<th scope="col">Date</th>
<th scope="col">Location</th>

</tr

To complete the relationships between cells, you should now associate each of the venues with its contact information and the band's concert date. In doing so you add even richer semantics.

<tr>
<td scope="row"><strong>The Nonsense Robots at</strong> Carling Academy</td>
<td>Sep 2nd 2008</abbr></td>

<td> Carling Academy Brixton Box Office ...</td>
</tr>

Completing Your Table With Microformats

With your table structurally complete, it is time for you to implement hCalendar elements and attributes to add a further level of rich meaning to your tabular content. Start by adding the vevent class attribute value to each of your table rows:

<tr class="vevent">
...
</tr>

Follow this by adding a summary for each event, plus its date, which should include the ISO formatted date that you discovered earlier.

<td class="summary" scope="row">
<strong>The Nonsense Robots at</strong> 
<span class="location">Carling Academy Brixton</span>, 

<abbr>UK</abbr>
</td>

<td>
<abbr title="20080902T20:00" class="dtstart">September 2nd 2008</abbr>

</td>

You may have noticed that the string "The Nonsense Robots at" has been strongly emphasized, but does not appear visually in the final result—more on that in just a moment.

In the final table cell, you should add the complete contact information for the ticketing agent for each venue, once again marked up using the hCard schema that by now should be very familiar.

<td class="vcard contact">
<span class="fn org">Carling Academy Brixton Box Office</span>

<span class="adr">
<span class="locality">211 Stockwell Road, </span>
<span class="region">London, </span>
<span class="postal-code">SW9 9SL</span>

<span class="country-name uk"><abbr>UK</abbr></span>
</span>
<span class="tel">07771 3000</span>
<a class="url" href="#">http://www.brixton-academy.co.uk/</a>

</td>

With your rich and meaningful mark-up now complete, you might be wondering why every piece of information you have added is not displayed in the final result? It's time for me to explain.

In making this design, I intend that only the country-name will be displayed in the browser. Using CSS, it is a simple matter for you to hide that unwanted visual content without the need for you to change your mark-up.

td .org, td .locality, td .region, 
td .postal-code, td .tel, 
td .url { display : none; }
Figure 3

Figure 3. Choosing to display certain information. Design copyright Andy Clarke.

You can also display the flag associated with that country by first adding an additional attribute (uk, de, jp, usa and ca) to the country-name and then attaching each flag as the background image on the cell using CSS.

td.country-name { padding-left : 30px; }
td .uk { background : url(ico_uk.png) no-repeat 0 0; }
td .usa { background : url(ico_usa.png) no-repeat 0 0; }
td .de { background : url(ico_de.png) no-repeat 0 0; }
td .ca { background : url(ico_ca.png) no-repeat 0 0; }
td .jp { background : url(ico_jp.png) no-repeat 0 0; }
Figure 4

Figure 4. Adding decorative touches to content. Design copyright Andy Clarke.

As one final touch, you can hide the strongly emphasized part of the summary. While you're hiding this content from view in a browser window, it remains in your mark-up to enhance the experience of accessing your content by other means.

Proponents of microformats largely agree that unlike meta information, content described by microformats should be visible within a design. I also believe that when I am designing, I should consider more than what directly appears within a browser window and that I should consider such factors as the page's printed output and the interaction between the core browser and any extensions such as the Tails or Operator extensions for the Firefox browser.

Figure 5

Figure 5. Designing for beyond the browser window. Design copyright Andy Clarke.

Spotting hCalendar in the Wild

There are now many publishers of web content who have implemented the hCalendar microformat when describing their event-based information, from conferences such as Web Directions to large-scale publishers such as Yahoo!

You can find many more implementations of hCalendar on the microformats wiki.

For me, the hCalendar microformat is perhaps one of the most interesting microformats as its array of elements and attributes allow for a wide variety of visual design and styling options. I hope that I have given you an insight into how hCalendar—in combination with hCard—can give both you and your readers a new range of options for styling and interacting with your content.