HCards are supposed to be the web page equivilant of VCards for email. They are supposed to provide properly tagged information that can be read by spiders, crawlers, browsers, toolbars or a myriad of other devices.

Here’s an example of a name and address with the proper HCard formatting tags:

its a simple address ? but the real magic is behind the code

<div id="hcard-Jasom-Smith" class="vcard"><span class="given-name">Jason</span> <span class="family-name">Smith</span>
Some Corporation LLC<a class="email" href="mailto:jason@gmail.com"> </a></div>
<div class="vcard"><a class="email" href="mailto:jason@gmail.com">jason@gmail.com</a></div>
<div id="hcard-Jason-Smith" class="vcard">
<div class="adr">
<div class="street-address">123 Main Street<span class="locality"> Mountain View</span>, <span class="region">CA</span>, <span class="postal-code">94043</span>
<span class="country-name">United States</span></div>
</div>
<div class="tel">650-555-1212</div>
</div>

You can see each of the elements has a class applied to it like “street-address”, “tel”, “given-name” and it all sits inside of a big “vcard” div class. These names are standardized. Stick with the standard names and anyone who builds an HCard reader into any of their tools will able to parse your data. If you want to see a full list of all the HCard tags I suggest using the HCard tool to build a sample and copying those tags.

Share on Facebook