Advanced Search

hCard microformat usage

/ Published in: HTML
Save to your folder(s)
Two usages of the hcard microformat for a single person and an organisation.

Expand | Embed | Plain Text

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.