hCard microformat usage


/ Published in: HTML
Save to your folder(s)

Two usages of the hcard microformat for a single person and an organisation.


Copy this code and paste it in your HTML
  1. <!--
  2. Use of the vCard(hCard) microformat, used to mark up contact details of
  3. people, companies, organisations and places.
  4. -->
  5.  
  6. <!--
  7. hCard for person
  8. -->
  9. <div class="vcard">
  10. <span class="fn n"><!-- FN = Full Structured Name -->
  11. <span class="given-name">John</span>
  12. <span class="additional-name">Jonny</span>
  13. <span class="family-name">Smith</span>
  14. Born <abbr class="bday" title="1965-09-22">September 22nd 1965</abbr>
  15. </span>
  16. <div class="adr">
  17. <div class="street-address">123 Fake Street</div>
  18. <div class="extended-address">Fake Floor 1</div>
  19. <span class="locality">Fake locality</span>
  20. <span class="region">Fake region</span>
  21. <span class="postal-code">FAK3 0DE</span>
  22. <span class="country-name">Fakeland</span>
  23. </div>
  24. <p><span class="title">Web Monkey</span>, <span class="org">Fake Company Name</span></p>
  25. <p><a href="http://thisisfake.com/" class="url">http://thisisfake.com/</a></p>
  26. <p><a href="mailto:[email protected]" class="email">[email protected]</a></p>
  27. </div>
  28.  
  29. <!--
  30. hCard for an organisation
  31. -->
  32. <div class="vcard">
  33. <p class="fn org">Fake Organisation Ltd
  34. (<a href="http://thisisfake.com/" class="url">http://thisisfake.com/</a>)
  35. </p>
  36. <div class="adr">
  37. <div class="street-address">123 Fake Street</div>
  38. <div class="extended-address">Fake Floor 1</div>
  39. <span class="locality">Fake locality</span>
  40. <span class="region">Fake region</span>
  41. <span class="postal-code">FAK3 0DE</span>
  42. <span class="country-name">Fakeland</span>
  43. </div>
  44. <p>Phone:
  45. <span class="tel">
  46. <span class="type">Work</span>
  47. <span class="value">+44 123 456 78</span>
  48. </span>
  49. </p>
  50. <p><a href="mailto:[email protected]" class="email">[email protected]</a></p>
  51. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.