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

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Microformats: The Fine Art of Markup: hAtom

Last updated Oct 17, 2003.

By Andy Clarke

All of the microformats you’ve learned so far in this series have been designed to solve common, real-world problems:

  • hCard enables you to mark up an individual’s or organization’s contact information semantically, with a series of class attribute values that are taken directly from the vCard standard. This not only adds semantic value, but enables other people to extract that data more easily; for example, by adding it to their address books.
  • hCalendar performs a similar function, but for event-related information. hCalendar enables people to extract single events or complete calendars more easily; plus, with the help of services such as those from Technorati and others, the user can subscribe to events that you publish—with little more than meaningful XHTML markup.

Last month you learned about hReview and how this microformat helps to solve many of the problems raised by publishing reviews of movies, books, events, and even organizations or people. hReview encourages a decentralized model for publishing reviews and allows services to compile opinions from many sites across the web.

In each case, we’ve addressed the main principles for developing microformats, as set out by microformats.org:

  • Solve a specific problem.
  • Start as simple as possible.
  • Design for humans first, machines second.
  • Reuse building blocks from widely adopted standards.
  • Modularity/embeddability.
  • Enable and encourage decentralized development, content, services.

In this article, you’ll learn about the hAtom microformat. hAtom has been designed to help with the publication of syndicated content such as articles and blog posts, and also to aid in archiving and content subscription.

You could be forgiven for wondering what problem exists for hAtom to solve. After all, every day millions of people publish new content, and many different methods are available for subscribing to and searching for that content. RSS has become a common way for people to access subscription-based services such as blogs and other regularly updated content. Once a tool for the hardened web geek, RSS has been brought to the attention of everyday web users because of its adoption by browser manufacturers (including Microsoft), who have integrated it into their browsers; and mainstream publishers (such as the BBC), who have fully embraced RSS as a tool for delivery.

While we commonly think of RSS as a single technology, it’s composed of several (largely incompatible) technologies, including the related RSS (Rich Site Summary and Really Simple Syndication) and RDF (RDF Site Summary) and the technically unrelated Atom. All of these are efficient methods for delivering content, but with the exception of Atom they largely rely on tools to create their required well-formed XML—hardly something that web designers in particular are commonly experienced in creating by hand.

The designers of the hAtom microformat chose Atom as the basis for their content microformat for several reasons. Unlike the various RSS versions that have become "de facto standards" by being widely adopted, Atom is in fact a draft IETF standard and provides much more of the needed functionality for a blog post microformat. The designers of hAtom took only what they needed from Atom—a minimal set of elements—and crafted a microformat that would be easy and familiar to web professionals who wanted to learn it.

Inside hAtom

While hAtom is based on a subset of Atom, there are differences; not least the fact that Atom is an XML language, but also that Atom feeds typically describe a series or list of articles or entries. hAtom is more suited to the ways in which people publish blog entries every day.

Let’s start by marking up a blog post (see Figure 1) from The Nonsense Robots web site, used to illustrate the microformats throughout this series.

Figure 1

Figure 1 Blogging The Nonsense Robots (design copyright Andy Clarke).

As the microformats community suggests, you start by using "the most accurately precise semantic XHTML building block for each object." So here’s the initial XHTML for this blog entry.

<h1>Stomping Robots</h1>
<h2>What is ska?</h2>
<div><img src="jina.jpg" alt="" />Jina Bee</div>

<p>Ska is a music genre that originated in Jamaica in the late 1950s and was a precursor to rocksteady and reggae.</p>

<h3>On the offbeat</h3>

<p>Ska combines elements of Caribbean mento and calypso with American jazz and rhythm and blues.</p>

<h3>2 Tone</h3>

<p>The 2 Tone genre, which began in the late 1970s in England, was a fusion of Jamaican ska rhythms and melodies with punk rock’s uncompromising lyrics and aggressive guitar chords.[4] Compared to 1960s ska, 2 Tone music had faster tempos, fuller instrumentation and a harder edge.</p>

Add the optional hfeed root element to a division that will contain all of the hentry entries on this page:

<div class="hfeed">

<div class="hentry">
</div>
</div>

Title

Next, add a title for your entry, which is one of the few "required" properties of hAtom. As is the case with many microformat properties, the property name for entry-title comes straight from Atom:

<h2 class="entry-title">What is ska?</h2>

Publication Date

Add the required publication updated date. You should know all about the abbr design pattern for dates from last month’s article on hCalendar events.

<abbr class="updated published" title="20080330">March 30th 2008</abbr>

If you’re reading closely, you’ll have noticed that in that last example I combined two values for the updated and publication dates, because typically blog entries aren’t updated once they’ve been published.

Author Information

Finally, add the last of the required properties for the author of this blog entry, the very lovely and talented Jina Bee.

<address class="vcard author">
<a href="http://www.thenonsenserobots.com/jina/" class="fn url">Jina Bee</a>
</address>

If you cast your mind back to the second article in this series, where you learned about the hCard microformat for marking up contact information for individuals or organizations, you’ll notice that we’re embedding one microformat (hCard) inside another (hAtom). The embeddable nature of microformats creates building blocks for the most meaningful content that we can publish.

Adding Content

Now let’s work with hAtom’s optional properties, starting with the purpose of any blog entry—its content. In this instance, it makes sense to contain all of the entry’s content in a single division. With the entry-content in place, your example entry should now look something like this.

<div class="hentry">

<h2 class="entry-title">What is ska?</h2>

<div class="entry-content">

<p>Ska is a music genre that originated in Jamaica in the late 1950s and was a precursor to rocksteady and reggae.</p>

<h3>On the offbeat</h3>

<p>Ska combines elements of Caribbean mento and calypso with American jazz and rhythm and blues.</p>

<h3>2 Tone</h3>

<p>The 2 Tone genre, which began in the late 1970s in England, was a fusion of Jamaican ska rhythms and melodies with punk rock’s uncompromising lyrics and aggressive guitar chords.[4] Compared to 1960s ska, 2 Tone music had faster tempos, fuller instrumentation and a harder edge.</p>

</div>

<address class="vcard author">

<a href="http://www.thenonsenserobots.com/jina/" class="fn url">Jina Bee</a>
</address>

<abbr class="updated published" title="20080330">March 30th 2008</abbr>

</div>

With your content in place and defined by the entry-content property, it’s just the right time to define other aspects of the blog entry with hAtom and embed a few other important related link-based microformats, starting with a summary.

Summaries

Authors often like to divide their blog entries across multiple pages; for example, an archives or summary page followed by the complete article on a secondary page. hAtom gives us the facility to define a segment of an entry as its summary. For this example, use the first paragraph of your entry:

<p class="entry-summary">Ska combines elements of Caribbean mento and calypso with American jazz and rhythm and blues. It is characterised by a walking bass line, accented guitar, or piano rhythms on the offbeat, and in some cases, jazz-like horn riffs.</p>

If you’re dividing entries across multiple pages (perhaps by posting summaries of your most recent articles on your home page or an archives page), it’s important to add a permanent link to the URL of your main article, using the rel attribute on the hyperlink:

<a href=" http://www.thenonsenserobots.com/whatisska/ " rel="bookmark">Bookmark</a>

By applying the rel attribute to this link, you explicitly define that link as a permanent location for the content that you’re publishing.

Categories and Technorati Tags

If you publish content regularly, your entries probably fall into one of several categories. Perhaps you write about music, design, or code; maybe you even write about microformats! In this example, your content is about music, but more specifically ska music from a particular point in history. Therefore, it makes sense to link to archives or services where a reader will find more articles on those topics. To achieve this semantic linking, you can employ the rel-tag link microformat:

<ul>
<li><a href="http://www.technorati.com/tag/music" rel="tag">Music</a></li>

<li><a href="http://www.technorati.com/tag/history" rel="tag">History</a></li>
<li><a href="http://www.technorati.com/tag/ska" rel="tag">Ska</a></li>

</ul>

Place this entry category or "tag" anywhere inside your hentry.

Moving Forward with hAtom

While hAtom is still a draft microformat and has yet to achieve full specification status, it has already been adopted by the popular WordPress blogging system, resulting in possibly millions of blog entries marked up with hAtom.

The Tails and Operator extensions to the Firefox browser add hAtom functionality to that browser, but perhaps the most significant advance is the news that the Internet Explorer team at Microsoft is utilizing hAtom as the basis for one of the most interesting new functions in the upcoming release of the IE 8 browser. This new functionality in the world’s most-used browser has been dubbed "WebSlices."

hSlice

Whereas Apple’s WebClips functionality enables a reader using the Safari browser to save any portion of any web page to the OS X Dashboard, Microsoft’s approach builds on hAtom. It allows a web designer or developer to define precise regions in a page. IE version 8 features the new WebSlices toolset, allowing a reader to save these component parts of a page to the Favorites toolbar at the top of the browser.

Defining a page region as a WebSlice is as easy as adding class="hslice" to an existing hentry implementation. You must also add a unique identifier (id) to each hslice so that it can be identified by the browser and added to the Favorites toolbar.

After adapting your working example to function as a WebSlice, your markup should now look like this:

<div class="hfeed">

<div class="hentry hslice" id="h01">
</div>
</div>

Each WebSlice requires an entry-title and will display this title on the individual tab in the browser. Your entry’s entry-content will also be displayed in the WebSlice interface. The reader will be notified automatically in the Favorites bar if you update the entry—without needing to return to your page (see Figure 2). Figure 3 shows how the user subscribes to the WebSlice, and Figure 4 shows the unstyled WebSlice from which the user can click over to view the full blog post.

Figure 2

Figure 2 hSlice is detected by IE version 8.

Figure 3

Figure 3 Subscribing to a WebSlice.

Figure 4

Figure 4 The unstyled WebSlice.

While I believe that several issues need to be resolved in Microsoft’s proposed implementation of hSlice (particularly in relation to independently styling WebSlice content, as demonstrated in the recent IE 8 beta version), I applaud Microsoft for building new functions on top of microformats rather than by developing its own proprietary schema.