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="http://chriscoyier.net">
  <span class="given-name">Christopher</span>
  <span class="additional-name">John</span>
  <span class="family-name">Coyier</span>
</a>
 <div class="org">CSS-Tricks</div>
 <a class="email" href="mailto:chriscoyier@gmail.com">chriscoyier@gmail.com</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>
 <div class="tel">555-555-5555</div>
</div>

Comments

  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
    Art
    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).

    -Art

    • User Avatar
      Micha
      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
    Kenny
    Permalink to comment#

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

  5. User Avatar
    vladyn
    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?

Submit 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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag