advanced code snippet search

Posted By

1man on 06/10/08


Tagged

hcard address contact microformat vcard


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

mitry
drwitt
bostonbasso
mhulse
kubaitis


hCard microformat usage

 / Published in: HTML
 

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

Expand | Embed | Plain Text 
  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
Posted By: nX07 on July 7, 2008

Thanks for the splitting up of the hCard for a person vs. an Organisation!

Posted By: mhulse on March 26, 2010

Yes! Thanks so much for showing how one would style an hcard for an organization! I have not found this info anywhere else.

You need to login to post a comment.