HCard

From Wikipedia, the free encyclopedia

The correct title of this article is hCard. The initial letter is shown capitalized due to technical restrictions.

hCard is a microformat for publishing the contact details of people, organizations and venues, in (X)HTML, Atom, RSS, or arbitrary XML. hCard is a 1:1 representation of the vCard standard (RFC 2426).

It allows parsing tools (for example other websites, or Firefox's Operator extension) to extract the details, and display them using some other website or mapping tool, index or search them, or to load them into an address book programme, for instance.

1 Example
2 Geo
3 Live example
4 Users
5 External links

[edit] Example

Consider the HTML:

 <div>
     <div>Joe Doe</div>
     <div>The Example Company</div>
     <div>604-555-1234</div>
     <a href="http://example.com/">http://example.com/</a>
 </div>

With microformat markup, that becomes:

 <div class="vcard">
     <div class="fn">Joe Doe</div>
     <div class="org">The Example Company</div>
     <div class="tel">604-555-1234</div>
     <a class="url" href="http://example.com/">http://example.com/</a>
 </div>

Here the formal name (fn), organisation (org), telephone number (tel) and url have been identified using specific class names; and the whole thing is wrapped in class="vcard", (see vCard) which indicate that the other classes form an hcard, and are not just coincidentally named. Other, optional, hCard classes also exist.

It is now possible for software, for example browser plug-ins, to extract the information, and transfer it to other applications, such as an address book.

[edit] Geo

The Geo microformat is a part of the hCard specification, and is often used to include the coordinates of a location within an hCard..

[edit] Live example

Here are the Wikimedia Foundation's contact details, as a live hCard:

Wikimedia Foundation Inc.

200 2nd Ave. South #358

St. Petersburg, FL 33701-4313

USA

Phone: +1-727-231-0101

Email: info@wikimedia.org

Fax: +1-727-258-0207

The mark-up (wrapped, and emboldening omitted, for clarity) used is:

<div class="vcard">
  <div class="fn org">Wikimedia Foundation Inc.</div>
  <div class="adr">
    <div class="street-address">200 2nd Ave. South #358</div>
    <div>
      <span class="locality">St. Petersburg</span>, 
      <span class="region">FL</span> <span class="postal-code">33701-4313</span>
    </div>
    <div class="country-name">USA</div>
    </div>
  <div>Phone: <span class="tel">+1-727-231-0101</span></div>
  <div>Email: <span class="email">info@wikimedia.org</span></div>
  <div>
    <span class="tel"><span class="type">Fax</span>: 
    <span class="value">+1-727-258-0207</span></span>
  </div>
</div>

(Ordinarily, one would use

  <abbr class="region" title="Florida">FL</abbr>

so that the output included region="Florida", but the abbr element is not supported on Wikipedia.)

Note that, in this example, the formal name (fn) and organisation (org) properties are combined on one element, indicating that this is the hCard for an organisation, not a person.