hCard is a microformat for publishing the contact details (which might be no more than the name) of people, companies, organizations, and places, in (X)HTML, Atom, RSS, or arbitrary XML.[1] The hCard microformat does this using a 1:1 representation of vCard (RFC 2426) properties and values, identified using HTML classes and rel attributes.
Here is hCard Creator.
Example [edit]
Consider the HTML:
<ul>
<li>Joe Doe</li>
<li>Jo</li>
<li>The Example Company</li>
<li>604-555-1234</li>
<li><a href="http://example.com/">http://example.com/</a></li>
</ul>
With microformat markup, that becomes:
<link rel="profile" href="http://microformats.org/profile/hcard">
...
</head>
...
<ul class="vcard">
<li class="fn">Joe Doe</li>
<li class="nickname">Jo</li>
<li class="org">The Example Company</li>
<li class="tel">604-555-1234</li>
<li><a class="url" href="http://example.com/">http://example.com/</a></li>
</ul>
Here the properties fn,[5] org (organization), tel (telephone number) and url (web address) have been identified using specific class names; and the whole thing is wrapped in class="vcard" which indicate that the other classes form an hcard, and are not just coincidentally named. If the hCard is for an organization or venue, the fn and org classes are used on the same element, as in <span class="fn org">Wikipedia</span> or <span class="fn org">Wembley Stadium</span>. 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.
Geo and adr [edit]
The Geo microformat is a part of the hCard specification, and is often used to include the coordinates of a location within an hCard.
The adr part of hCard can also be used as a stand-alone microformat.
Live example [edit]
Here are the Wikimedia Foundation's contact details as of 2010-10-28, as a live hCard:
Wikimedia Foundation Inc.
149 New Montgomery Street, 3rd Floor
San Francisco, CA 94105
USA
Phone: +1-415-839-6885
Email: info@wikimedia.org
Fax: +1-415-882-0495
The mark-up (wrapped for clarity) used is:
<div class="vcard">
<div class="fn org">Wikimedia Foundation Inc.</div>
<div class="adr">
<div class="street-address">149 New Montgomery Street, 3rd Floor</div>
<div> <span class="locality">San Francisco</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94105</span></div>
<div class="country-name">USA</div>
</div>
<div>Phone: <span class="tel">+1-415-839-6885</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-415-882-0495</span></span>
</div>
</div>
Note that, in this example, the fn and org properties are combined on one element, indicating that this is the hCard for an organization, not a person.
Other attributes [edit]
Other commonly used hCard attributes include
bday - a person's birth date
email
honorific-prefix
honorific-suffix
label - for non-granular addresses
logo
nickname
note - free text
photo
post-office-box
Source
- wikipedia
Here is hCard Creator.
Example [edit]
Consider the HTML:
<ul>
<li>Joe Doe</li>
<li>Jo</li>
<li>The Example Company</li>
<li>604-555-1234</li>
<li><a href="http://example.com/">http://example.com/</a></li>
</ul>
With microformat markup, that becomes:
<link rel="profile" href="http://microformats.org/profile/hcard">
...
</head>
...
<ul class="vcard">
<li class="fn">Joe Doe</li>
<li class="nickname">Jo</li>
<li class="org">The Example Company</li>
<li class="tel">604-555-1234</li>
<li><a class="url" href="http://example.com/">http://example.com/</a></li>
</ul>
Here the properties fn,[5] org (organization), tel (telephone number) and url (web address) have been identified using specific class names; and the whole thing is wrapped in class="vcard" which indicate that the other classes form an hcard, and are not just coincidentally named. If the hCard is for an organization or venue, the fn and org classes are used on the same element, as in <span class="fn org">Wikipedia</span> or <span class="fn org">Wembley Stadium</span>. 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.
Geo and adr [edit]
The Geo microformat is a part of the hCard specification, and is often used to include the coordinates of a location within an hCard.
The adr part of hCard can also be used as a stand-alone microformat.
Live example [edit]
Here are the Wikimedia Foundation's contact details as of 2010-10-28, as a live hCard:
Wikimedia Foundation Inc.
149 New Montgomery Street, 3rd Floor
San Francisco, CA 94105
USA
Phone: +1-415-839-6885
Email: info@wikimedia.org
Fax: +1-415-882-0495
The mark-up (wrapped for clarity) used is:
<div class="vcard">
<div class="fn org">Wikimedia Foundation Inc.</div>
<div class="adr">
<div class="street-address">149 New Montgomery Street, 3rd Floor</div>
<div> <span class="locality">San Francisco</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94105</span></div>
<div class="country-name">USA</div>
</div>
<div>Phone: <span class="tel">+1-415-839-6885</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-415-882-0495</span></span>
</div>
</div>
Note that, in this example, the fn and org properties are combined on one element, indicating that this is the hCard for an organization, not a person.
Other attributes [edit]
Other commonly used hCard attributes include
bday - a person's birth date
honorific-prefix
honorific-suffix
label - for non-granular addresses
logo
nickname
note - free text
photo
post-office-box
Source
- wikipedia
