• Article

Simple Semantics With Microformats, Part 3

Emily P. Lewis | November 3, 2010

 

In part 3 of this series covering microformats, we’ll take a close look at the hCalendar microformat for event information. We’ll also discuss the use of the value class pattern for indicating machine-readable date information.

If you are just now catching this series, be sure to check out part 1 and part 2, in which I covered:

  • What microformats are
  • Benefits of microformats
  • Publishing resources and tools
  • Parsers, extractors and transformers
  • XFN, online social connections and identity consolidation
  • hCard, electronic business cards and Google Rich Snippets

hCalendar

hCalendar is another widely-used microformat. It provides machine-readable semantics for events and date/time-based web content.

In keeping with the goal of using existing standards, hCalendar is a 1:1 representation of the iCalendar standard for sharing calendar data. This allows machines to extract hCalendar from web pages and import it into users calendar applications.

hCalender, like hCard, is a compound microformat. This means that it utilizes several HTML attribute-value pairs (classes and values) to indicate the semantics of events. To figure out what attributes-value pairs you’ll need, first examine the content:

SXSW Interactive features five days of compelling presentations from the brightest minds in emerging technology. Join us March 11-15, 2011 at the Austin Convention Center.

sxsw.com/interactive

Now we identify the hCalendar class values relevant to our content:

Content hCalendar class Values
Root (required) vevent
Name (required) summary
Description description
Web site url
Start date (required) dtstart
End date dtend
Location location

Note that, just like hCard, there is a required root value (vevent) that needs to be assigned to whatever element contains all the event content.

Next, we apply valid, semantic markup (POSH):

<p><a href="https://sxsw.com/interactive">SXSW Interactive</a> features five days of compelling presentations from the brightest minds in emerging technology. Join us March 11-15, 2011 at the <a href="https://www.austinconventioncenter.com/">Austin Convention Center</a>.</p>

Finally, add the hCalendar class values:

<p class="vevent"><a href="https://sxsw.com/interactive" class="summary url">SXSW Interactive</a> features <span class="description">five days of compelling presentations from the brightest minds in emerging technology</span>. Join us <span class="dtstart"><span class="value-title" title="2011-03-11"> </span>March 11</span><span class="dtend"><span class="value-title" title="2011-03-15"> </span>-15, 2011</span> at the <a href="https://www.austinconventioncenter.com/" class="location">Austin Convention Center</a>.</p>

As in my hCard examples, I needed to add a bit of non-semantic markup to serve as “hooks” for some of the the hCalendar class values, including description:

<span class="description">five days of compelling presentations from the brightest minds in emerging technology</span>

and the date-related values:

<span class="dtstart"><span class="value-title" title="2011-03-11"> </span>March 11</span><span class="dtend"><span class="value-title" title="2011-03-15"> </span>-15, 2011</span>

I also added a hyperlink to “Austin Convention Center” because I’d rather use that as my hook for class="location". It’s simply a personal preference. What you choose is up to you.

But the point to note is that sometimes it is necessary to utilize non-semantic markup to add machine-readable semantics. Even though I’m a diehard POSH fan, I’m not so much of a purist that I don’t use extra markup when I need it, whether for microformats or for presentational purposes. It is just reality.

Markup Does & Doesn’t Matter

Speaking of markup, this example uses hCalendar in a natural language format. As I explained in part 2, this is where the event information appears in the course of natural sentences.

But hCalendar, like all of the microformats, doesn’t rely on a particular markup structure. Rather than containing my event in a paragraph, I could’ve broken it out into “chunked” pieces:

<h1><a href="https://sxsw.com/interactive">SXSW Interactive</a></h1>
<p>Five days of compelling presentations from the brightest minds in emerging technology.</p>
<ul>
<li>March 11-15, 2010</li>
<li>Austin Convention Center</li>
</ul>

And then applied the hCalendar class values accordingly, making sure to add a containing <div> for my vevent root:

<div class="vevent">
<h1><a href="https://sxsw.com/interactive" class="summary url">SXSW Interactive</a></h1>
<p class="description">Five days of compelling presentations from the brightest minds in emerging technology.</p>
<ul>
<li><span class="dtstart"><span class="value-title" title="2011-03-11"> </span>March 11</span><span class="dtend"><span class="value-title" title="2011-03-15"> </span>-15, 2011</span></li>
<li class="location">Austin Convention Center</li>
</ul>
</div>

Both of my examples are valid and they are fairly POSH. But, again, the markup doesn’t matter for microformats to work. You could use nothing but a bunch of <div>s and <span>s and, as long as your microformats are valid, machines will still be able to parse them.

That said, markup does matter. Regardless of microformats, you should be striving for valid and semantic markup. I recommend it. The microformats community recommends it. It is part of today’s web standards and offers a range of benefits from accessibility to portability. If you are bothering to enrich your content with microformats, you should first be enriching it with great markup.

Lastly, these examples use a small subset of the available hCalendar class values. Be sure to reference the Microformats Wiki for a full list and if you are looking for other hCalendar use cases, my book covers several, including a monthly calendar format.

Use the Value Class Pattern for Dates

If you paid close attention to the previous examples, you may be asking “what’s all that extra stuff for dtstart and dtend?”

<span class="dtstart"><span class="value-title" title="2011-03-11"> </span>March 11</span><span class="dtend"><span class="value-title" title="2011-03-15"> </span>-15, 2011</span>

This is one example of the value class pattern in microformats for indicating date information. This pattern evolved in response to accessibility, localization and usability concerns with previous methods of specifying date-time information.

In my example, both <span class="dtstart"> and <span class="dtstart"> contain a <span class="value-title">. This tells machines that the machine-readable information for the start and end dates (in ISO 8601 format) can be found in the title value.

<span class="value-title" title="2011-03-11">

Note that <span class="value-title"> only contains a single space character:

<span class="value-title" title="2011-03-11"> </span>

Also note that <span class="value-title"> immediately follows its parent element, appearing before the human-readable content and without any additional nesting.

This is just one approach of the value class pattern, which offers authors several options for specifying dates and times in microformats. The example above uses what I like to call the “empty <span> method,” but I could’ve also used the abbr design pattern:

<span class="dtstart"><abbr class="value-title" title="2011-03-11"> March 11</abbr></span>

Or the method where <span class="value-title"> contains the web content, rather than a single space character:

<span class="dtstart"><span class="value-title" title="2011-03-11"> March 11</span></span>

The best thing about the value class pattern is that you can decide which approach works best and makes the most sense to you. I recommend you read more about the various approaches and how they address historic issues with date-time information and then decide for yourself.

Here are two articles with lots of examples to get you started:

hCalendar Benefits

hCalendar offers the same global benefits as all microformats:

  • Minimal investment
  • Web standards
  • Workflow efficiencies

hCalendar also has the unique benefits of providing an enhanced user experience and improving findability.

              

Downloadable Events

Like hCard, one of the biggest benefits of hCalendar is the ability for users to download content to their computers. With hCalendar, machines can extract event information and transform it into an .ics file that can be imported into calendar applications.

One such machine is H2VX Events Conversion Service. You simply enter the URL of a site containing hCalendar and it generates an .ics file you can download with a single click:

The service also provides download and subscription links you can embed in your site, as well as bookmarklets to convert events directly from your browser’s toolbar:

Better Findability

Content published with hCalendar also has greater findability, thanks to Yahoo! Searchmonkey and Google Rich Snippets. These semantic initiatives support the addition of machine-readable metadata — via microformats and RDF — in order to provide more useful and meaningful search results.

Google’s Rich Snippets, which I covered in part 2, utilize content published with microformats to provide more meaningful search results snippets.

When Google indexes pages with hCalendar, for example, it can extract the machine-readable data. That data is then applied to the snippets you see in search engine results:

In Figure 3, the hCalendar content on the site is displayed in the snippet with links to specific events, as well as date information. This context-specific information not only makes the result stand out more from others, but also provides users a more meaningful and functional search result.

And it isn’t just hCalendar and hCard. Rich Snippets and Searchmonkey also support hProduct, hRecipe and hReview, while Searchmonkey can also search for adr, geo, hAtom, hResume and rel-tag.

Rich Snippets is a “roll-out” initiative, so not all sites with hCalendar are indexed for Rich Snippets right now, nor do all users see the Rich Snippets. In fact, I couldn’t get an hCalendar Rich Snippet in my results and had to use Google’s image for Figure 3.

*They will, though.*Be sure to stay up-to-date on Google’s news about the initiative, including how to validate your microformats for Rich Snippets and how to submit your site for indexing.

Authoring Tools

There are a few hCalendar authoring tools available if you aren’t that into hand-coding. However, I recommend using these with some caution, as not all of them have been updated to work with the value class pattern I described earlier. Also, some of them generate horrid markup (spanitis! divitis!).

Parsers, Extractors & Transformers

In addition to H2VX, there are many other hCalendar conversion tools you should check out:

Finishing Up in Part 4

In the final article (part 4) of this series, I’ll explore how to get even more semantic richness by combining microformats. I’ll also discuss what HTML5 and microdata mean for microformats. And if you haven't read them yet, please take a look at part 1 and part 2!

In the meantime, here are a few more articles on hCalendar and date-time information you may enjoy:

 

About the Author

Emily Lewis is a freelance web designer of the standardista variety, which means she gets geeky about things like semantic markup andCSS, usability and accessibility. As part of her ongoing quest to spread the good word about standards, she writes about web design on her blog, A Blog Not Limited, and is the author of Microformats Made Simple and a contributing author for the HTML5 Cookbook. She’s also a guest writer for Web Standards Sherpa, .net magazine and MIX Online.

In addition to loving all things web, Emily is passionate about community building and knowledge sharing. She co-founded and co-manages Webuquerque, the New Mexico Adobe User Group for Web Professionals, and is a co-host of the The ExpressionEngine Podcast. Emily also speaks at conferences and events all over the country, including SXSW, MIX, In Control, Voices That Matter, New Mexico Technology Council, InterLab and the University of New Mexico.

Find Emily on: