Basic Microformatted hCard

A basic address and URL, marked up using Microformats.

<div id="hcard-Christopher-John-Coyier" class="vcard">
 <a class="url fn n" href="">
  <span class="given-name">Christopher</span>
  <span class="additional-name">John</span>
  <span class="family-name">Coyier</span>
 <div class="org">CSS-Tricks</div>
 <a class="email" href=""></a>
 <div class="adr">
  <div class="street-address">123 Appleseed Street</div>
  <span class="locality">Chicago</span>, <span class="region">IL </span> <span class="postal-code">60647</span>
  <span class="country-name">United States</span>
 <div class="tel">555-555-5555</div>
Deploy a static site in one minute
Build and deploy a CMS-enabled site with Gatsby in just a few clicks. It's free.


  1. User Avatar
    Paul Randall
    Permalink to comment#

    Just used it for the first time myself! It’s worth doing as it gives meaning to the data, and Google is utilising this information

  2. User Avatar
    Permalink to comment#

    Only problem I have with microformats is that is gives the spambots all the goodies they need to annoy us. Without obfuscating the data, I would no sooner use microformats than plain text on my website. Until this gapping crater is fixed, I can’t support this stuff (good idea… bad implementation).


    • User Avatar
      Permalink to comment#

      You could simply obfuscate the information and then deobfuscate it via javascript.
      Then Spambots cannot use the information.

  3. User Avatar
    Attila Hajzer
    Permalink to comment#

    Thats funny, the title says hCard. but in the code it says Vcard.

  4. User Avatar
    Permalink to comment#

    Attila, the class vcard is a root class name that indicates the presence of an hCard.

  5. User Avatar
    Permalink to comment#

    I’ve used them widely accross my websites, but since I have’t followed the trend from more than 2 years I would like to ask how they are still popular and widely used?
    Are there any alternatevies like schema or RDFa?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.