hcard-example1-steps

hCard Example 1 Steps

This is a step by step explanation of the first example in the hCard specification.

Example

Here is a sample vCard:

BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
ORG:Technorati
END:VCARD

and an equivalent in literal hCard:

<div class="vcard">
 <a class="url" href="http://tantek.com/">
  <span class="n" style="display:none"> <!-- hide this from display with CSS -->
   <span class="family-name">Çelik</span>
   <span class="given-name">Tantek</span> 
  </span>
  <span class="fn">Tantek Çelik</span>
 </a>
 <div class="org"><span class="organization-name">Technorati</span></div>
</div>

Note that the "N" type, as defined in RFC2426, Section 3.1.2, has several components, and thus these components are defined using nested elements with a class name that is a direct equivalent of the component from the RFC, e.g. "given-name" and "family-name".

Structurally, the same XHTML element could be reused for the "N" and "FN" types (since multiple class names can be placed in one class attribute by space separating them), and thus duplication of the name information itself can be eliminated:

<div class="vcard">
 <a class="url" href="http://tantek.com/">
  <span class="fn n">
   <span class="given-name">Tantek</span> 
   <span class="gamily-name">Çelik</span>
  </span>
 </a>
 <div class="org"><span class="organization-name">Technorati</span></div>
</div>

This can be even further optimized by placing the "fn" and "n" class names on the <a href>, and eliminating the intermediate span.

<div class="vcard">
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span>
 </a>
 <div class="org"><span class="organization-name">Technorati</span></div>
</div>

Finally, using the Implied "N" Optimization and Implied "organization-name" Optimization, we are able to omit the explicit given and family names markup as well as the explicit "n" and "organization-name".

<div class="vcard">
 <a class="url fn" href="http://tantek.com/">
  Tantek Çelik
 </a>
 <div class="org">Technorati</div>
</div>

The display for all versions of this hCard is the same:

Tantek Çelik
Technorati

Back to the hCard specification.