Blue Anvil Journal » Blog Archive » Introduction to Microformats + a look at hCard & hAtom

Introduction to Microformats + a look at hCard & hAtom

hAtom

hAtom is a microformat used for marking up blog posts/syndicated content.

hAtom is a draft microformat for content that can be syndicated, primarily but not exclusively weblog postings.

http://microformats.org/wiki/hAtom

If you use a blogging application, such as wordpress, hAtom is very easy to implement to your templates.

Marking-up hAtom

The properties of hAtom are show below, along with the part of the blog entry they apply to.

hfeed - Goes around all the posts on the blog page.
hentry - Contains an individual blog post.
entry-title - The title of the blog post.
entry-content - The content of the blog post.
entry-summary - Summery of the blog post, for example an excerpt.
updated - When the post was last updated.
published - Date the post was published.
author - Author of the entry, must be a hCard. If no author is present, the nearest

with class ‘author’ (that is a hCard) will be used.
bookmark -For the permalink, uses rel-bookmark.

Using hAtom with the Wordpress loop

To make wordpress display your posts using hAtom you can add the hAtom class names to the wordpress loop. Here is an extract from a wordpress loop that I converted to use hAtom:

<div id="content" class="hfeed">
	<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
			<div class="hentry entry" id="post-<?php the_ID(); ?>">
				<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
				<small><abbr class="published" title="<?php the_time('Y-m-d'); ?>T<?php the_time('h:m:s'); ?>"><?php the_time('F j, Y'); ?></abbr></small>

				<div class="entry-content">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>

				<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>

		<?php endwhile; ?>

With posts marked up as hAtom, the firefox ‘Tails’ extension can see them, this is a screenshot of Tails viewing Blue Anvil.

hAtom Screenshot

So that was a quick tour of hAtom. Although still in the draft stages, hAtom is set to be an extremely useful Microformat, and I look forward to its completion.

For more examples of hAtom go to the hAtom wiki examples page.

For more information on hAtom go to the hAtom wiki.

Closing Remarks

To conclude, I just have to say, I believe Microformats are a great thing, and the web as a whole will benefit from them in the future. The semantic benefits of using Microformats is extremely exciting, and I hope webmasters understand, and use them whenever possible.

I look forward to new and exciting Microformats, and cannot wait for them to be utilised by software and search engines.

Related Entries

Popular Entries

1 - Anthony says:

Great article that showcases some of the widest spread uses of Microformats, I’ll have myn up soon! Microformats is a word I found quite scary at first but the more you read about it the more you realise its possible widespread use.

Comment made on February 9, 2007 at 6:07 pm

2 - Dactura says:

I have been reading about hCard for two days… two 8 hour days and your article is the best. Especially appreciate that you have taken the time to take the vCard and format it nicely with CSS to appear as a business card. Nice touch!

I still have no idea how one prevents the spam-bots from harvesting all these vcards though! I do not think the mung will help; but I do believe the spam filters are getting much better.

Comment made on February 9, 2007 at 6:08 pm

3 - Mike J says:

Thanks

In regards to the spam bots, I know munging is not the perfect solution, but I havent had much problem with spam yet. There are other solutions out there, e.g javascript scripts for hiding mail, I personally havent tried them yet, but some could be effective (although no solution will ever be 100% effective).

Any contact details on the web are always at risk from spam, its a shame, even forms get abused.

Comment made on February 9, 2007 at 6:09 pm

4 - Astorg says:

This is the best article on hcards I have seen so far. I agree with oen earlier commenter, though, that spam can be a problem. He mung will not be enough since tests have shown that even a minged address that has never been used for anything else can get spammed. Could you suggest details of a javascript solution?

Comment made on May 29, 2007 at 3:00 pm