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>
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
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
Thats funny, the title says hCard. but in the code it says Vcard.
Attila, the class vcard is a root class name that indicates the presence of an hCard.