Code Snippet

Home » Code Snippets » HTML » Basic Microformatted hCard

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>

Reference URL

Subscribe to The Thread

  1. Paul Randall

    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

    Reply ↓
  2. Art

    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

    Reply ↓
  3. Attila Hajzer

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~