advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

1man on 06/10/08


Tagged

hcard address contact microformat vcard


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

mitry


hCard microformat usage

Published in: HTML 

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

Plain TextExpand 
  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:john@thisisfake.com" class="email">john@thisisfake.com</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:company@thisisfake.com" class="email">john@thisisfake.com</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!

You need to login to post a comment.