Grow your CSS skills. Land your dream job.

Last updated on:

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>

Reference URL


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


    • Micha
      Permalink to comment#

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

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

  4. Kenny
    Permalink to comment#

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".