A Blog Not Limited

to web design, standards & semantics

.net magazine Microformats Tutorial

May 19, 2010

Published in

.net magazine cover

As part of my ongoing efforts for global microformats domination, I wrote a microformats tutorial for .net magazine — sold as Practical Web Design in the US. And, in my typically verbose fashion, I wrote too much.

Lucky for me (and the readers), it was turned into a two-parter. Part one of the tutorial appears in the June 2010 issue (#202). It provides a simple background on microformats, covering some of the core concepts, and then dives right into how to publish content with XFN and hCard.

Part 2 of the tutorial will appear in the July 2010 (#203) issue. It picks up where part 1 left off, covering the hCalendar microformat (including details about the value class pattern) and how to combine microformats for more semantic richness.

Pick up a copy of the magazine to get all the microformatty goodness. If you can't wait, whet your appetite with my Getting Semantic With Microformats blog series … and then go get the magazine.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!


Share the Love

Toby's Gravatar

Toby opines:


Enjoyed reading this weel written, concise intro to uFs, have been approaching them in haphazard fashion as i needed them so having a good dead wood tutorial gave me excuse to sit in sun and read the lot!

liked the world cup comment too!! ;)

jeblognetter's Gravatar

jeblognetter opines:


so nice!!!!!!!!!

Kenny's Gravatar

Kenny opines:


I just read your article and freakin’ loved it. Had never heard of microformats before and now I’m really interested. Interested enough to come to your blog and comment…

Can’t wait till part two !?(<-would this be considered the ACII version of an interrobang, incorrectly applied?)

Emily's Gravatar

Emily responds:


@Toby, @jeblognetter, @Kenny - Thanks so much for the kind words! I’m thrilled you all found the tutorial useful :)

Todd DeDecker's Gravatar

Todd DeDecker opines:


Do you think there will ever be native support for Microformats in browsers? Are things headed that way?

I really like the concept and embrace it as I go. I have your book which was extremely helpful, but feel somewhat dissapointed that the rich information is not really availble to users. The behind the scenes stuff is great, but I want to be able to click on the microformatted item and have it do something intelligent (calendar etc.).


Emily's Gravatar

Emily responds:


@Todd - I don’t really have a solid sense of what browser makers are doing in terms of microformats and semantic markup.

My personal speculation is that unless browser makers see a real value in adding support for semantics, there won’t be a push for them to add features that allow users to take advantage.

And, we as “web people” aren’t the biggest user base for browsers. It’s my mom, your neighbor, the guy down the street who doesn’t even know what a browser is and thinks IE is the internet.

So, I don’t currently see incentive for browser makers to start adding features for their main users, when those main users really only use the address bar and maybe the back button.

For those folks “in the know,” there are a bunch of browser add-ons and extensions to help us leverage microformats on a site. But that doesn’t help the everyday users.

I do think the Oomph Microformats Toolkit is a step in the right direction, though. It can be added to any site via jQuery to show that there is extra information on a page. Doesn’t matter what browser is used, and it is apparent to any user (a little icon in the upper left). This is something you can do to make microformats more apparent to the everyday user.

Beyond Oomph, it is up to us to let users know there is rich information on a site they can utilize. So, if you have hCard on a page, do you also provide a link (perhaps generated by H2VX) to let users know they can download the contact info as a business card? Or hCalendar as an event added to their calendar?

I like to believe (hope?) that by taking steps such as Oomph AND publishing microformats everywhere we can, their value will begin to be understood and valued by users… and then the browser makers would have a reason to start incorporating support.

It is what I believe has happened with Google and Yahoo, as they increase their support of semantic search (SearchMonkey, RichSnippets). As more sites publish the machine-readable information, the search engines can utilize that info to provide a better experience for their users.

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.


I Tweet, Therefore I Am

Follow @emilylewis on Twitter!