I’m a day late and a dollar short, given that 10 years has passed and we’re now living with microformats2. While microformats are classes, they’re really meant for semantic mark up and NOT CSS styling. Perhaps the delineation wasn’t as specific a decade ago and it’s relatively common for designers to unwittingly style on microformats classes, but now with a more modern-facing web semantic mark up is much more sophisticated. Some web frameworks have code that easily allows microfomats classes to be injected into pre-existing code so that one doesn’t need to rewrite and restyle from the ground up. There are also an increasing number of people in the IndieWeb movement who are using microformats for some far more interesting functionality. Sadly, newer functionality like this can often break the display and operation of sites which rely on it (especially in cases like WordPress with thousands of sites which can inadvertently style on top of classes (hentry is a common example) and thereby cause lots of troubleshooting issues for unsuspecting users down the line.

Better modern practice would dictate a simple change: just add an additional class into the markup alongside your microformats to do the styling on the added class and not on the microformat class.

The most thorough post yet, good job :).

very nice and comprehensiv tutorial – thanks for all the effort!

I just wonder about those spammers collecting adresses – do we actually help them to make life as easy as possible by offering hcards? Has somebody ideas how to prevent this harvesting?

Ops, very nice good tutorial. Thanks for the tip.

Being on the wild world web for 12 years now I always try and remember and will wont forget on the internet there are NO rules! i don’t have to have microformats on my page if I don’t want too! ;-p this is a great tutorial though! good on ya! and css is the way to go!

We can make a lot with CSS and Microformats’ classes and, your tutorial, surely is a good example.

Thanx for it :)

Thanks for the nice comments one and all. Glad people found it useful. I refer you too to Andy Budd’s 24 Ways entry on using CSS3 to make this task a whole heap easier (and I also cover precisely this technique in my microformats book)!

http://24ways.org/2006/rounded-corner-boxes-the-css3-way

My thoughts on anti spam harvesting are that its not only a losing but a lost cause. The cost in harvesting email addresses is such that pretty much no matter how they are obfuscated, they are easily tractable. Or, you can prety much make them up, hih is I suspect what mpst spammers do – send out millions of $%^&@adomain.com, just generating $%^&, or using a list of a few thousand very commonly used names.
And this comes from a lot of experience both trying to stop harvesters, and spam (I typically end up with in the order of hundreds of spam emails a day after all the tricks I can think of upstream.)

So, to me, it’s kind of an non issue – the challenge seems to me to make our contact details more accessible to legitimate harvesting (whether by people or software), and often anti spam harvesting techiques do precisely the opposite. This way we raise the value of our contact details, making the legitimate/illegitimate use ratio higher than it would otherwise be.

thanks again one and all!

j

I strongly believe that SPAM is a different problem. It should be fixed, but in different place. Microformats make internet more convenient place… for everyone. I put my e-mail clearly everywhere. Fortunately GMail does a great job of filtering SPAM away. Once in a three months I receive SPAM, but more often I receive some interesting e-mails from interesting people, who found my address on the web. At the end of the day it worth it.

hi john,
thanks for your feedback concerning spam… you convinced me ;-)

I just put 2 hCards on our website…

hey nice work. i’ve been trying to use hcard and hcalender in my blog wherever i can. now i can make them look even better. happy new year