Styling hCards with CSS


Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. matthias

    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?

  2. matty

    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!

  3. Angelo

    There are some really great reasons to have and use microformats. Check out for the sense behind it.

    Great tutorial, I’ll definitely be making use of it soon. Thanks so much!

  4. John Allsopp

    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)!

    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 $%^&, 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!


  5. Dmitry Baranovskiy

    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.

  6. rakesh

    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

Impress us

Be friendly / use Textile