Getting Semantic With Microformats, Part 5: hAtom ~ A Blog Not Limited

Over the course of this series, I've discussed the various microformats I've implemented on A Blog Not Limited: rel-based, XFN, hCard and hCalendar.

Now, it's time to talk about the hAtom microformat, which adds semantics and structure to web content that could be syndicated, such as blog posts or news articles.

The History: Atom

The hAtom microformat is based on the Atom XML syndication format.

Different than the 1:1 representations of hCard and hCalendar to vCard and vCalendar, respectively, the hAtom schema isn't an exact reflection of Atom.

Atom is a robust model that provides much more functionality than that needed for content like blog posts. As such, hAtom uses only the minimal elements needed; more of a subset of Atom.

That said, the hAtom properties and sub-properities are based on corresponding elements in the Atom nomenclature.

Microcontent Not Necessarily Syndication

Though hAtom is based on Atom, hAtom itself is not a syndication format. Author and editor of hAtom, David Janes explains:

“… hAtom was never intended to be a "syndication format" nor to compete with Atom or RSS. It's simply designed to describe the microcontent on webpages, such as blog posts. We used Atom because it provides a well-defined nomenclature for describing such elements.”

So, hAtom isn't exclusively for web content that could be syndicated. However, for the purposes of this article, I will be talking about blog posts, which are typically syndicated.

The Basics

Before getting into the details of hAtom, let's review some foundational rules (similar to those for hCard and hCalendar):

Properties and sub-properties are expressed as class values.
Because of the relationship with Atom, the specified hAtom properties and sub-properties reflect the concepts of Atom elements.
Property and sub-property names are case-sensitive.
The "root" property cannot be combined with any of its properties/sub-properties. Thus, <p class="hfeed author"> is invalid.

And, just as with all microformats, the markup used doesn't matter (though it should be both valid and semantic).

Class values (properties/sub-properties) are what define the hAtom microformat.

The Profile

Update: 04/21/2010

Recently, the microformats community completed updates to the profile URIs for all microformats. The correct values have been updated in this article. See my Microformats Profile URIs Updated post for further details.

If you choose to implement hAtom, you should also reference its profile in the <head> of web pages that include the microformat:

<head profile="http://purl.org/uF/hAtom/0.1/http://microformats.org/profile/hatom">

For both hCard and hCalendar, I mentioned the use of the combined profile, which covers all non-draft microformats:

<head profile="http://purl.org/uF/2008/03/http://microformats.org/profile/specs">

However, hAtom is a draft specification and its profile isn't covered in the combined profile. As such, you need to specify its profile explicitly.

If you are also referencing the combined profile, you simply add the hAtom profile (W3C allows multiple profile values, separated by white space):

<head profile="http://purl.org/uF/2008/03/http://microformats.org/profile/specs http://purl.org/uF/hAtom/0.1/http://microformats.org/profile/hatom">

Example: Single Post

Okay, enough of the background. Here's how I'm implementing hAtom on my full article content page:

<div class="hentry">
<h3 class="entry-title">Web Accessibility Is Important</h3>
<abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<p><a href="#commentForm" title="Post your own comment">Got something to say?</a></p>
<div class="entry-content">
<p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
…
</div>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel="tag">accessibility</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel="tag">standards</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>
</dl>
</div>

Root Property: `hfeed`

The root of hAtom is hfeed, which can contain one or more entries (in this example, entries are blog posts).

This root property is optional. If it is not included, it is assumed on the page itself, which is what I have done (or rather not done) in the above example.

A given page can have multiple hfeeds, if necessary.

Required Property: `hentry`

Each entry must be contained by the hentry property. As I mentioned, there can be one or more (unlimited) hentry properties applied.

For this example, there is only one hentry because this implementation is on a page with the full content of a single blog post. I discuss multiple entries later in this article.

Th hentry property contains all of the information about the entry.

Required Sub-Property: `entry-title`

One of the required sub-properties is entry-title, which indicates the title of the entry.

In my example, I've applied entry-title to an <h3> because, as a title, it makes semantic sense to contain it in a heading.

Required Sub-Property: `author`

Another required sub-property is author, which indicates the author of the entry.

According to the spec., the content contained by the author sub-property must also be marked up with hCard applied to an <address> element.

Caveat: Don't Display Author Name

However, there are instances, my blog included, where publishers don't care to list the author name.

The spec. accommodates for this situation and allows for it to be excluded from the hentry if the page itself contains hCard information in an <address> element assigned class="author".

This alternative is also explained in the hAtom FAQ.

Because I have this hCard configuration in the footer of all my pages, I exclude author from my hAtom implementations and they are still, technically, valid.

For blogs with multiple authors that do not wish to display author name, there currently isn't a valid alternative. The author content must be in the hentry.

I would imagine a CSS solution to suppress visual display (display:none) in these cases could be acceptable.

Caveat: `address` With hCard

Yet this brings up another issue: the use of <address> for hCard.

As I mentioned in Part 3, the use of <address> for an hCard is only valid if the hCard is for the document owner. The hCard FAQ further advises against using <address> for hCards other than the document owner.

Therefore, if hAtom entries are authored by someone other than the document owner, <address> wouldn't be the appropriate semantic element to use.

This particular issue is currently being discussed. What has been proposed is to eliminate the <address> requirement.

Required Sub-Property: `updated`

The updated sub-property is also required, and it indicates the date/time the entry was last updated.

Yet there is a caveat to updated: if this sub-property is not defined, the sub-property published is used to indicate the date/time of entry update.

In my example, you will note I do not include an updated sub-property. I do, however, include published.

Which brings me to …

Optional Sub-Property: `published`

The optional published sub-property is almost identical to updated in the sense that it reflects date/time information for the entry.

The primary difference, however is that published is specific to the when the entry was first published, whereas updated could be the date of publish or it could subsequent date/times when the entry had been updated.

It is also acceptable to include both published and updated to describe a single element containing date/time information:

<abbr class="published updated" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>

In my implementations, published alone is acceptable for my purposes (and more semantic, as far as I'm concerned), so that is the sub-property I chose to specify.

Datetime Design Pattern

Update: 06/02/2009

The datetime design pattern is now deprecated in favor of the value class pattern. See part 8 of this series for more on this new pattern.

For both updated and published, date/time information for hAtom is recommended to be expressed using the datetime design pattern:

<abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>

This pattern specifies that the containing element is an <abbr> which has a title attribute value that reflects "machine-readable" date/time information while the contained information (and what displays in the browsers) is "human-readable" date/time information.

Further, the datetime design pattern specifies that the title value should be expressed in ISO 8601 format.

Finally, as I've addressed previously, there are accessibility concerns surrounding the datetime design pattern.

To date, these issues have not been addressed, though the microformats community is working towards that goal.

Optional Sub-Property: `entry-summary`

The entry-summary sub-property is optional. It indicates a summary or extract of the entry. This sub-property can be used an unlimited number of times within hentry.

On my blog I don't create summaries for my articles, so I don't include this sub-property in my hAtom implementations.

Optional Sub-Property: `entry-content`

Another optional sub-property is entry-content which indicates the full entry content.

In my example, all of my article content is contained by a single <div class="entry-content">. However, the entry-content sub-property can be used an unlimited number of times within an hentry.

Optional: rel-bookmark

hAtom also specifies a rel attribute value to indicate the permalink of the entry: bookmark.

In Part 1 of this series, I talked about rel-based microformats, which are used to indicate the relationship of links (<a>) to the document destination (href).

rel-bookmark is just another example of describing the relationship of a link, however, it is not a microformat on its own. It exists only as part of hAtom to describe the permalink.

In case you aren't aware, permalink is the permanent link/URL for a blog post/article/entry.

With hAtom, you simply add rel="bookmark" to the entry's permalink:

<a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Web Accessibility Is Important</a>

You may notice, I don't have a permalink in my first example. This is because I generally follow the rule–of–thumb to not provide an active link to the current page (Nielsen's #10 of the Ten Most Violated Homepage Design Guidelines).

And because rel-bookmark is optional, my hAtom is still technically valid.

If an hentry does not have a permalink indicated, the URL of the page is used. Further, if the hentry has an id attribute defined, that value is appended to the URL to identify individual entries.

Categories by Combining Microformats

I also mentioned the rel-tag microformat in Part 1.

It is added to links (<a>) that indicate what a page — or part of that page — is about. Basically, organization/categorization through "tagging," which is broadly used in blogs.

hAtom takes advantage of rel-tag information (the beauty of combining microformats) that is contained within both hfeed and hentry:

Links assigned rel="tag" that appear within an hfeed (remember, this can be excluded and is assumed on the page) but outside of hentry are considered "feed categories."
Links assigned rel="tag" that are contained by hentry are considered "entry categories."

In my example, I include rel-tag links within my hentry for both the "Category" link and my "Tags" links:

<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>

<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>

Note that the rel-tag specification requires that the link destination (href) includes the actual value of the "tag" as the final segment of the URL value. This is known as the "tagspace."

Example: Multiple Posts

Now that I've covered the details of hAtom, I thought I'd also show an example of how it could be implemented beyond a single entry.

On my blog, I've also added hAtom to my home page, which features my three most recent articles:

<div class="hentry">
<h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Web Accessibility Is Important</a></h3>
<abbr class="published" title="2008-08-28T13:14:37-07:00">Aug 28, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<div class="entry-content">
<p>The National Federation of the Blind v. Target lawsuit was settled this past Wednesday on the following key terms:</p>
…
</div>
<p><a href="http://www.ablognotlimited.com/articles/web-accessibility-is-important/" rel="bookmark">Continue Reading</a></p>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/accessibility/" rel="tag">accessibility</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/standards/" rel="tag">standards</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/web+design/" rel="tag">web design</a></dd>
</dl>
</div>
<div class="hentry">
<h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/plateau/" rel="bookmark">Plateau</a></h3>
<abbr class="published" title="2008-08-27T13:59:51-07:00">Aug 27, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<div class="entry-content">
<p>As I posted previously, I'm doing the one hundred push ups challenge: a six-week program designed to get me able to do 100 consecutive push ups. I am now on my seventh week.</p>
</div>
<p><a href="http://www.ablognotlimited.com/articles/plateau/" rel="bookmark">Continue Reading</a></p>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/exercise/" rel="tag">exercise</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/fitness/" rel="tag">fitness</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/push+ups/" rel="tag">push ups</a></dd>
</dl>
</div>
<div class="hentry">
<h3 class="entry-title"><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel="bookmark">Getting Semantic With Microformats, Introduction</a></h3>
<abbr class="published" title="2008-09-05T07:05:34-07:00">Sep 5, 2008</abbr>
<p class="category"><a href="http://www.ablognotlimited.com/articles/category/commentaries/" rel="tag">Commentaries</a></p>
<div class="entry-content">
<p>I'm an organizer with a sometimes frustrating need to pay attention to the smallest details.</p>
…
</div>
<p><a href="http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-introduction/" rel="bookmark">Continue Reading</a></p>
<dl>
<dt>Tags:</dt>
<dd><a href="http://www.ablognotlimited.com/articles/tag/French+translation/" rel="tag">French translation</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/hAtom/" rel="tag">hAtom</a></dd>
<dd><a href="http://www.ablognotlimited.com/articles/tag/hCalendar/" rel="tag">hCalendar</a></dd>
…
</dl>
</div>

Notice in this example, that I'm using multiple instances of hentry; one for each individual article.

Also note, I indicate permalinks for each entry (in the links for title and "Continue Reading") since they aren't links to the current page.

Other than those two differences, hAtom is implemented the same as in my first example.

Potential Implementations

Beyond the two examples I've provided here, there are many other possibilities for implementing hAtom:

A list of entries that appears on an archive page
Search results for entries
Bulletin board
Comments

I'm considering implementing hAtom on my own archive and search results pages (and maybe even comments, because they need hCard anyway) once I get some free time to modify my markup.

Draft Status

Of all the microformats I've covered in this series, hAtom has been the most difficult. I, personally, suspect this is due to the fact that it is a draft specification.

Basically, the challenges I've encountered are minimal, but slightly frustrating:

There's a lot less information available about the specifics of hAtom and its properties/sub-properties.
There are several open issues being discussed that make it challenging to implement hAtom (i.e. use of <address>).
There are far fewer hAtom tools/resources available, as compared to other microformats.
The available hAtom generators and parsers don't appear (to me) to be as up–to–date as the spec. itself. As such, they don't appear to take into account the caveats I've mentioned (i.e. excluding author and rel-bookmark).

Yet, from my perspective, this is to all be expected from a draft specification. It is still being modified, worked on, discussed.

I do not, however, think this means you shouldn't implement hAtom or, at a minimum, become familiar with it. Instead, give it a try and just be aware that the specification is in some state of (relatively minimal) flux.

Tools & Resources

Though I mentioned there are comparatively fewer hAtom tools and resources available, there are some out there:

WordPress Sandbox theme is a "skeleton" theme that can be used as the foundation for custom WP themes and it supports hAtom.
Frances Berriman created an hAtom PHP WordPress loop that can be added to existing WP themes.
Michael Kaply created an hAtom user script for Firefox's Operator add-on. This script adds additional bookmarking functionality for hentry occurrences. (Hat tip to my friend Chris Harrison for telling me about this script.)
There is an hAtom transformer that extracts hAtom from a page so that it can be automatically transformed into the XML for an Atom syndication feed.
hAtom2Atom uses XSLT to transform hAtom markup into Atom XML.
There is a remote proxy using hAtom2Atom from Luke Arno, as well as a Chris Casciano's filter script using hAtom2Atom.
Optimus is robust microformats transformer that supports hAtom. Additionally, it offers a validator that supports hAtom.
hAtom transcoder is another transformer that not only outputs Atom 1.0, but also RSS 2.0.

In the Wild

Even though hAtom is a draft specification, it is being embraced:

Google has added functionality for hAtom permalinks to its Notebook.
Blogger's new Layouts template system supports hAtom.
Spinn3r added functionality for hAtom entry-content to its 2.1 blog indexing service.

And there are still more hAtom examples in the wild.

Benefits

(X)HTML Syndication

I think one of the coolest benefits of hAtom is its potential for XHTML syndication.

In the list of tools and resources, I mention a couple transformers. These utilize XSLT to transform XHTML with hAtom into XML for an Atom or RSS feed.

This means no need to create or maintain a separate Atom or RSS XML files for syndication. Simply by utilizing hAtom and one of these transformers, the syndication XML is automatically generated.

Try it yourself. All you do is prepend the URL of a page that contains hAtom (i.e. http://www.ablognotlimited.com/) with the URL of one of the transformers (http://transformr.co.uk/hatom/):

<a href="http://transformr.co.uk/hatom/http://www.ablognotlimited.com/">Atom feed for A Blog Not Limited</a>

The subsequent link creates the Atom XML and users select it to subscribe:

Google Reader subscription page for A Blog Not Limited using hAtom transformer

Personally, I've not yet implemented this option on my site, as I have customized RSS feeds for which I don't care to lose the customization. Not to mention, I've yet to even add Atom feeds.

However, these transformations are definitely on my list of functionality to explore for this blog.

Semantics

You didn't think I'd forget this, did you? Of course not.

By leveraging existing standards (XHTML elements and attributes), microformats add semantic value to web content. And semantics help both humans and machines process, search and understand the web.

Microformats also encourage web standards … standard approaches to marking up content, applying class information, even processes for development.

Semantics are good. Standards are good. Microformats are good.

Coming in Part 6

That concludes my "coverage" of the hAtom draft microformat.

In Getting Semantic With Microformats, Part 6, I will discuss the hResume microformat for résumé and CV information.

Stay tuned!

Update: 12/07/2008

Jan Sládek has translated this article in Czech: Kódujme sémanticky s mikroformáty: hAtom.

Jia Mi has translated this article in Chinese: 使用微格式来丰富网站语义：hAtom.

I don't read Czech or Chinese, so I can't attest for the translations. But the intentions are good, so I'm promoting them.

A Blog Not Limited

to web design, standards & semantics