hCard examples

Example hCards.

Authors

Tantek Çelik
Brian Suda

Instructive Examples

Authors of Pages and Posts

Per the HTML4.01 specification, authors should be using the <address> element to indicate the "contact information for a document or a major part of a document." E.g.

<address>
 <a href="http://tantek.com/">Tantek Çelik</a>
</address>

By adding hCard to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:

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

This could be displayed as:

Tantek Çelik

This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.

See the microformats.org blog (view the source) for a live example. The author of every blog post on the microformats.org blog is marked up as an <address class="vcard"> element like the example shown above.

References to People and Organizations

A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages. E.g.:

<cite><a href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post 
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) 
about an unintentionally humorous letter he received from the
<a href="http://irs.gov/">Internal Revenue Service</a>.

By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:

<cite class="vcard"><a class="fn url" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post 
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) 
about an unintentionally humorous letter he received from the
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a></span>.

Note the class names "fn org url" on the hyperlink surrounding the IRS. Using the same value (or element for that matter) for "fn" and "org" indicates that the hCard describes an organization rather than a person.

This could be displayed as:

Eric Meyer wrote a post (Tax Relief) about an unintentionally humorous letter 
he received from the Internal Revenue Service.

hCard and XFN

References to People in Blog Posts

In the above example, one person (the blogger) is referring to another person (Eric Meyer). In addition to using hCard to explicitly mark up the reference as a person, the blogger can use XFN (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:

<cite class="vcard"><a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post 
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) 
about an unintentionally humorous letter he received from the
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a></span>.

It would be displayed the same as the previous example.

References to People in Blogrolls

Many bloggers are using XFN (often using an easy user interface like that built into WordPress) to explicitly indicate their relationships to the people in their blogrolls:

<ul>
 <li><a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li>
 <li><a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li>
</ul>

By adding hCard markup to an XFN Friendly blogroll, you can explicitly indicate the name and URL of the person in addition to their relationship:

<ul>
 <li class="vcard"><a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li>
 <li class="vcard"><a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li>
</ul>

This could be displayed as:

For more information on XFN, see the XFN home page, joining XFN, and background on XFN.

This technique is used in the WP Microformatted Blogroll plugin.

New Types of Contact Info

Since vCard was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.

Does this mean that vCard (and hence hCard) must be extended to represent these?

Thanks to the flexibility of the URL property, the answer is no, no extensions are necessary. Instead, we use the proper URL for the service which identifies the service (protocol, machine, and/or path), and place the individual's address inside that.

AOL Instant Messenger (AIM)

AOL Instant Messenger (AIM) ids can be represented using the aim: protocol. Many who publish their AIM ids do so with clickable URLs e.g.:

<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>

Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>

Yahoo Messenger

Similarly, Yahoo Instant Messenger (YIM) ids can be represented using the ymsgr: protocol. And similarly many publish their YIM ids as clickable URLs e.g.:

<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>

Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>

MSN Messenger

Unfortunately, AFAIK, there is no hacked up defacto protocol for opening an MSN IM session with an MSN userid (which themselves are just email addresses). Thus we must simply resort to marking them up as email addresses, and expect that consumers may use some heuristic, such as "hotmail.com email addresses are also MSN IM ids". -Tantek

MSN Messenger (MSNIM) ids can be represented using the msnim: protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:

<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>

For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>

Updated 14 May 2006 - Ruben

Ruben, I tried this, and "msnim:" is an unrecognized protocol on MacOSX.4 (this is with the latest MSN Messenger for Mac installed and running and logged int). Could you provide links to documentation about "msnim:" and links to actual pages that publish their MSNIM ids this way? I don't know of any - Tantek

Tantek, Wikipedia's History of Windows Live Messenger states that MSN Messenger 7.5 for Windows, among other things, introduced: "the msnim protocol handler, allowing Web sites to provide links which automatically add a contact or start conversations (for example clicking on link msnim:chat?contact=login@passport.net will start chat conversation with user login@passport.net).". The Mac version is notoriously lagging behind, sadly. --chucker 11:33, 29 Jun 2006 (PDT)

It also seems that the msnim protocol handler in only supported by Microsoft Internet Explorer 7 (haven't tried earlier versions) on Windows. Latest versions of Firefox, Opera and Netscape Navigator doesn't recognize the protocol. Well, for at least, not at the moment. - Juha Liikala

XMPP (Jabber)

Extensible Messaging and Presence Protocol (XMPP) ids can be represented using the xmpp: protocol, e.g.:

<a class="url" href="xmpp:username@jabberservice.com">IM with username@jammerservice.com</a>

The protocol allows much richer URLs, see RFC4622.

There are not many current clients supporting the protocol.

Skype

Skype can be represented using the skype: protocol. It can be used to open a chat session or make a Skype call.

<a href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese) </a>

<a href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese) </a>

Thus for hCard, we could adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<a class="url" href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>

<a class="url" href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>

Site profiles

Bloggers often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By labeling them as URL properties, these additional facets of identity can be publish in an hCard as well.

delicious:
- <a class="url" href="http://del.icio.us/rbach">Robert Bachmann's links</a>
Flickr:
- <a class="url" href="http://flickr.com/photos/tantek/">See my photos</a>
- <a class="url" href="http://flickr.com/people/tantek/">Flickr profile</a>
Technorati:
- <a class="url" href="http://technorati.com/profile/tantek/">Technorati profile</a>
Add more here...
- ....

Organizations and Departments

Departments are marked up using the "organization-unit" class name inside the "org" element, with the "organization-name" specifically marked up to distinguish it from the department:

<div class="vcard">
 <div class="org fn">
  <div class="organization-name">Sprinkler Fitters U.A. Local 483</div> 
  <div class="organization-unit">Apprenticeship Training Center</div>
 </div>
</div>

The department may also be part of the address, in which case, you may want to explicitly mark it up as the "extended-address" in addition to the "organization-unit".

<div class="vcard">
 <div class="adr">
  <div class="org fn">
   <div class="organization-name">Sprinkler Fitters U.A. Local 483</div>
   <div class="organization-unit extended-address">Apprenticeship Training Center</div>
  </div>
  <div class="street-address">2531 Barrington Court</div>
  <span class="locality">Hayward</span>, 
  <abbr title="California" class="region">CA</abbr>
  <span class="postal-code">94545</span>
 </div>
</div>

Note that by nesting the org inside the address we avoided having to duplicate the department name.

RFC 2426 examples in hCard

These are 1:1 hCard examples for each example in RFC 2426.

Mark Pilgrim has made these hCard examples available as separate files:

http://diveintomark.org/projects/greasemonkey/hcard/tests/

2.4.2 VCARD

AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n
TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERNET:\n
jfriday@host.com\nEND:VCARD\n

This vCard fragment has one property whose value is another vCard, and could be represented as an hCard fragment with an embedded hCard, literally (with the unnecessary type=internet default omitted, and the implied n optimization):

<div class="agent vcard">
 <a class="email fn" href="mailto:jfriday@host.com">Joe Friday</a>
 <div class="tel">+1-919-555-7878</div>
 <div class="title">Area Administrator, Assistant</div>
</div>

this hCard could be displayed as:

Joe Friday
+1-919-555-7878
Area Administrator, Assistant

3.1.1 FN Type Definition

FN:Mr. John Q. Public\, Esq.

this vCard fragment as an hCard fragment:

<span class="fn">Mr. John Q. Public, Esq.</span>

this hCard fragment could be displayed as:

Mr. John Q. Public, Esq.

3.1.2 N Type Definition

Example 1

N:Public;John;Quinlan;Mr.;Esq.

this vCard fragment as an hCard fragment:

<span class="n">
 <span class="honorific-prefix">Mr.</span>
 <span class="given-name">John</span>
 <span class="additional-name">Quinlan</span>
 <span class="family-name">Public</span>, 
 <span class="honorific-suffix">Esq.</span>
</span>

this hCard fragment could be displayed as:

Mr. John Quinlan Public, Esq.

Example 2

N:Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.

this vCard fragment as an hCard fragment:

<span class="n">
 <span class="honorific-prefix">Dr.</span>
 <span class="given-name">John</span>
 <span class="additional-name">Philip</span>
 <span class="additional-name">Paul</span>
 <span class="family-name">Stevenson</span>,
 <span class="honorific-suffix">Jr.</span>,
 <span class="honorific-suffix">M.D.</span>,
 <span class="honorific-suffix">A.C.P.</span>
</span>

this hCard fragment would be displayed as:

Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.

3.1.3 NICKNAME Type Definition

Example 1

NICKNAME:Robbie

this vCard fragment as an hCard fragment:

<span class="nickname">Robbie</span>

this hCard fragment could be displayed as:

Robbie

Example 2

NICKNAME:Jim,Jimmie

this vCard fragment as an hCard fragment:

<span class="nickname">Jim</span>, 
<span class="nickname">Jimmie</span>

this hCard fragment would be displayed as:

Jim, Jimmie

3.1.4 PHOTO Type Definition

Example 1

PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif

this vCard fragment as an hCard fragment:

<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" />

Example 2

PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
 AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
 ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 <...remainder of "B" encoded binary data...>

this vCard fragment as an hCard fragment (line breaks inserted into src value for readability):

<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />

3.1.5 BDAY Type Definition

Example 1

BDAY:1996-04-15

this vCard fragment as an hCard fragment:

<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>

this hCard fragment could be displayed as:

April 15, 1996

Example 2

BDAY:1953-10-15T23:10:00Z

this vCard fragment as an hCard fragment:

<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr>

this hCard fragment could be displayed as:

Oct 15, 1953

Example 3

BDAY:1987-09-27T08:30:00-06:00

this vCard fragment as an hCard fragment:

<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr>

this hCard fragment could be displayed as:

Sept 9, 1987

3.2.1 ADR Type Definition

ADR;TYPE=dom,home,postal,parcel:;;123 Main
  Street;Any Town;CA;91921-1234

this vCard fragment as an hCard fragment:

<div class="adr">
 <abbr class="type" title="dom">US</abbr>
 <span class="type">home</span> address, for
 <abbr class="type" title="postal">mail</abbr> and
 <abbr class="type" title="parcel">shipments</abbr>:
 <div class="street-address">123 Main Street</div>
 <span class="locality">Any Town</span>, <span class="region">CA</span>, 
 <span class="postal-code">91921-1234</span>
</div>

this hCard fragment could be displayed as:

US home address, for mail and shipments:

123 Main Street

Any Town, CA, 91921-1234

3.2.2 LABEL Type Definition

LABEL;TYPE=dom,home,postal,parcel:Mr.John Q. Public\, Esq.\n
 Mail Drop: TNE QB\n123 Main Street\nAny Town\, CA  91921-1234
 \nU.S.A.

this vCard fragment as an hCard fragment:

<nowiki>
Please use the following address label for 
<div class="label">
 <abbr class="type" title="dom">local delivery</abbr>
 <abbr class="type" title="home">to my home</abbr>
 <abbr class="type" title="postal">of mail</abbr>
 <abbr class="type" title="parcel">and packages:</abbr>
<pre>
Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA  91921-1234
U.S.A.

</nowiki>

Note: the above hCard fragment uses a <pre> tag inside a property value to capture/represent explicit carriage returns ("\n" characters) from the vCard fragment.

this hCard fragment could be displayed as:

Please use the following address label for local delivery to my home of mail and packages:

Mr.John Q. Public, Esq.
Mail Drop: TNE QB
123 Main Street
Any Town, CA  91921-1234
U.S.A.

3.3.1 TEL Type Definition

TEL;TYPE=work,voice,pref,msg:+1-213-555-1234

this vCard fragment as an hCard fragment:

<span class="tel">
 <abbr class="type" title="pref">my</abbr> 
 <span class="type">work</span> 
 <abbr class="type" title="voice">phone</abbr>, with 
 <abbr class="type" title="msg">voicemail</abbr>:
 <span class="value">+1-213-555-1234</span>
</span>

this hCard fragment could be displayed as:

my work phone, with voicemail: +1-213-555-1234

3.3.2 EMAIL Type Definition

Example 1

EMAIL;TYPE=internet:jqpublic@xyz.dom1.com

this vCard fragment as an hCard fragment:

<a class="email" href="mailto:jqpublic@xyz.dom1.com">email jqpublic</a>

this hCard fragment could be displayed as:

email jqpublic

Example 2

EMAIL;TYPE=internet:jdoe@isp.net

this vCard fragment as an hCard fragment:

<a class="email" href="mailto:jdoe@isp.net">email jdoe</a>

this hCard fragment could be displayed as:

email jdoe

Example 3

EMAIL;TYPE=internet,pref:jane_doe@abc.com

this vCard fragment as an hCard fragment:

<a class="email" href="mailto:jane_doe@abc.com">
 <abbr class="type" title="pref">preferred</abbr> 
 email for jane_doe
</a>

this hCard fragment could be displayed as:

preferred email for jane_doe

3.3.3 MAILER Type Definition

MAILER:PigeonMail 2.1

this vCard fragment as an hCard fragment:

Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.

this hCard fragment could be displayed as:

Jane Doe uses PigeonMail 2.1 for email.

3.4.1 TZ Type Definition

Example 1

TZ:-05:00

this vCard fragment as an hCard fragment:

<span class="tz">-05:00</span>

this hCard fragment could be displayed as:

-05:00

Example 2

TZ;VALUE=text:-05:00; EST; Raleigh/North America
;This example has a single value, not a structure text value.

this vCard fragment as an hCard fragment:

<abbr class="tz"
 title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">
 EST
</abbr>

this hCard fragment could be displayed as:

EST

3.4.2 GEO Type Definition

GEO:37.386013;-122.082932

this vCard fragment as an hCard fragment:

<span class="geo">
 <span class="latitude">37.386013</span>, 
 <span class="longitude">-122.082932</span>
</span>

this hCard fragment could be displayed as:

37.386013, -122.082932

3.5.1 TITLE Type Definition

TITLE:Director\, Research and Development

this vCard fragment as an hCard fragment:

<span class="title">Director, Research and Development</span>

this hCard fragment could be displayed as:

Director, Research and Development

3.5.2 ROLE Type Definition

ROLE:Programmer

this vCard fragment as an hCard fragment:

<span class="role">Programmer</span>

this hCard fragment could be displayed as:

Programmer

3.5.3 LOGO Type Definition

Example 1

LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg

this vCard fragment as an hCard fragment

<img class="logo" src="http://www.abc.com/pub/logos/abccorp.jpg" alt="my logo" />

this hCard fragment could be displayed as (note: I used a real URL for the image):

Example 2

LOGO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
<...the remainder of "B" encoded binary data...>

this vCard fragment as an hCard fragment

<img class="logo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
...remainder of B encoded binary data..." alt="" />

no display equivalent given, since data: URL from original example is incomplete.

3.5.4 AGENT Type Definition

Example 1

AGENT;VALUE=uri:
 CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com

this vCard fragment as an hCard fragment

<a class="agent" href="CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com">JQPUBLIC</a>

this hCard fragment could be displayed as:

JQPUBLIC

Example 2

AGENT:BEGIN:VCARD\nFN:Susan Thomas\nTEL:+1-919-555-
 1234\nEMAIL\;INTERNET:sthomas@host.com\nEND:VCARD\n

this vCard fragment as an hCard fragment

<span class="agent vcard">
 <a class="email fn n" href="mailto:sthomas@host.com">Susan Thomas</a>,
 <span class="tel">+1-919-555-1234</span>
</span>

this hCard fragment could be displayed as:

Susan Thomas, +1-919-555-1234

Note: the vCard in the AGENT property vCard fragment is actually invalid since it lacks an "N" property. However, the hCard version *is* valid, since I added the "n" class name to the example.

3.5.5 ORG Type Definition

ORG:ABC\, Inc.;North American Division;Marketing

this vCard fragment as an hCard fragment:

<span class="org">
 <span class="organization-name">ABC, Inc.</span>, 
 <span class="organization-unit">North American Division</span>,
 <span class="organization-unit">Marketing</span>,
</span>

this hCard fragment could be displayed as:

ABC, Inc., North American Division, Marketing

3.6.1 CATEGORIES Type Definition

Example 1

CATEGORIES:TRAVEL AGENT

this vCard fragment as an hCard fragment:

<span class="category">TRAVEL AGENT</span>

this hCard fragment could be displayed as:

TRAVEL AGENT

Example 2

CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY

this vCard fragment as an hCard fragment:

<span class="category">INTERNET</span>, 
<span class="category">IETF</span>, 
<span class="category">INDUSTRY</span>, 
<span class="category">INFORMATION TECHNOLOGY</span>

this hCard fragment would be displayed as:

INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY

3.6.2 NOTE Type Definition

NOTE:This fax number is operational 0800 to 1715
 EST\, Mon-Fri.

this vCard fragment as an hCard fragment:

<p class="note">This fax number is operational 0800 to 1715 EST, Mon-Fri.</p>

this hCard fragment could be displayed as:

This fax number is operational 0800 to 1715 EST, Mon-Fri.

3.6.3 PRODID Type Definition

PRODID:-//ONLINE DIRECTORY//NONSGML Version 1//EN

Note, this vCard property actually doesn't make sense as a hCard property, since it really should be filled in by whatever code transforms the hCard into a vCard, e.g. Brian Suda's X2V.

3.6.4 REV Type Definition

Example 1

REV:1995-10-31T22:27:10Z

this vCard fragment as an hCard fragment:

<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr>

this hCard fragment could be displayed as:

Updated: 10/31 10:27p

Example 2

REV:1997-11-15

this vCard fragment as an hCard fragment:

<abbr class="rev" title="1997-11-15">Updated: November 15</abbr>

this hCard fragment could be displayed as:

Updated: November 15

3.6.5 SORT-STRING Type Definition

Example 1

FN:Rene van der Harten
N:van der Harten;Rene;J.;Sir;R.D.O.N.
SORT-STRING:Harten

this vCard fragment as an hCard fragment:

<span class="n"
 <span class="honorific-prefix">Sir</span>
 <span class="fn">
  <span class="given-name">Rene</span>
  <span class="family-name">
   van der <span class="sort-string">Harten</span>
  </span>
 </span>
 (<span class="additional-name">J.</span>),
 <span class="honorific-suffix">R.D.O.N.</span>
</span>

Note: The string "Harten" was NOT repeated in the hCard, even though it WAS repeated in the vCard (3 times! In N, FN, and SORT-STRING). The "SORT-STRING" property provides another good demonstration of how hCard enables better adherence to the DRY principle than vCard.

this hCard fragment could be displayed as:

Sir Rene van der Harten (J.), R.D.O.N.

Example 2

FN:Robert Pau Shou Chang
N:Pau;Shou Chang;Robert
SORT-STRING:Pau

this vCard fragment as an hCard fragment:

<span class="fn n">
 <span class="additional-name">Robert</span>
 <span class="family-name sort-string">Pau</span>
 <span class="given-name">Shou Chang</span>
</span>

Note: Not only was the string "Pau" was NOT repeated in the hCard (better DRY principle adherence again), even though it WAS repeated in the vCard, but in this case since the "family-name" and "sort-string" are the same, we were able to use element conservation and use only one element for both properties.

this hCard fragment could be displayed as:

Robert Pau Shou Chang

Example 3

FN:Osamu Koura
N:Koura;Osamu
SORT-STRING:Koura

this vCard fragment as an hCard fragment:

<span class="fn">
 Osamu <span class="sort-string">Koura</span>
</span>

Note: This example, in addition to illustrating better support for the DRY principle, also makes use of the Implied "N" Optimization.

this hCard fragment could be displayed as:

Osamu Koura

Example 4

FN:Oscar del Pozo
N:del Pozo Triscon;Oscar
SORT-STRING:Pozo

this vCard fragment as an hCard fragment:

<span class="n">
 <span class="fn">
  <span class="given-name">Oscar</span>
  del <span class="sort-string">Pozo</span>
 </span>
 <span class="family-name" style="display:none">
  del Pozo Triscon
 </span>
</span>

Note: This example unfortunately could not completely adhere to the DRY principle due to the "FN" using a *substring* of the family-name, and in addition thus had to hide the extra "family-name" string value using CSS display:none, which in general should be avoided. Suggestion welcome for improvements on this hCard fragement.

this hCard fragment could be displayed as:

Oscar del Pozo

Example 5

FN:Christine d'Aboville
N:d'Aboville;Christine
SORT-STRING:Aboville

this vCard fragment as an hCard fragment:

<span class="fn">
 Christine d'<span class="sort-string">Aboville</span>
</span>

Note: This example re-demonstrates the same hCard advantages/efficiencies demonstrated in example 3 above.

this hCard fragment could be displayed as:

Christine d'Aboville

3.6.6 SOUND Type Definition

Example 1

SOUND;TYPE=BASIC;VALUE=uri:CID:JOHNQPUBLIC.part8.
 19960229T080000.xyzMail@host1.com

this vCard fragment as an hCard fragment

<object class="sound" type="audio/basic"
 data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com">
pronounciation of "JOHN Q PUBLIC"
</object>

this hCard fragment would probably be displayed as

pronounciation of "JOHN Q PUBLIC"

unless your browser supports the MIME type "audio/basic" (defined in RFC2046 section 4.3) and has some way of retrieving "CID:" urls.

Example 2

SOUND;TYPE=BASIC;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
 AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
 ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 <...the remainder of "B" encoded binary data...>

this vCard fragment as an hCard fragment

<object class="sound" 
data="data:audio/basic;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN
 AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm
 ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 ...the remainder of "B" encoded binary data...">
pronounciation
</object>

no display equivalent given, since data: URL from original example is incomplete.

3.6.7 UID Type Definition

UID:19950401-080045-40000F192713-0052

this vCard fragment as an hCard fragment

Unique id: 
 <span class="uid">19950401-080045-40000F192713-0052</span>

this hCard fragment could be displayed as

Unique id:19950401-080045-40000F192713-0052

Note: in practice I don't think I've seen globally unique IDs for "contact info" records published on the web, but perhaps I am not considering enough examples.

3.6.8 URL Type Definition

URL:http://www.swbyps.restaurant.french/~chezchic.html

this vCard fragment as an hCard fragment

<a class="url" href="http://www.swbyps.restaurant.french/~chezchic.html">Chez Chic</a>

this hCard fragment could be displayed as

Chez Chic

3.7.1 CLASS Type Definition

Example 1

CLASS:PUBLIC

this vCard fragment as an hCard fragment

<span class="class">PUBLIC</span>

this hCard fragment could be displayed as

PUBLIC

Example 2

CLASS:PRIVATE

this vCard fragment as an hCard fragment

<span class="class">PRIVATE</span>

this hCard fragment could be displayed as

PRIVATE

Example 3

CLASS:CONFIDENTIAL

this vCard fragment as an hCard fragment

<span class="class">CONFIDENTIAL</span>

this hCard fragment could be displayed as

CONFIDENTIAL

3.7.2 KEY Type Definition

KEY;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
 wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
 Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
 E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
 VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
 MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
 Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
 EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
 dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
 EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
 +hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
 mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
 rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
 UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==

this vCard fragment as an hCard fragment

<object class="key" type="application/octet-stream"
 data="data:application/octet-stream;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA
 wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX
 Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0
 ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj
 E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD
 VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx
 MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz
 Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ
 EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2
 dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB
 EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau
 +hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP
 mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y
 rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7
 UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==">
Key
</object>

this hCard fragment could be displayed as

Key

Note: Because of the lack of a TYPE value in the RFC2426 example, I substituted application/octet-stream. Clearly for it to be of some use, the type specified must be some sort of key or certificate mime type.

7. Authors' Addresses

BEGIN:vCard
VERSION:3.0
FN:Frank Dawson
ORG:Lotus Development Corporation
ADR;TYPE=WORK,POSTAL,PARCEL:;;6544 Battleford Drive
;Raleigh;NC;27613-3502;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-919-676-9515
TEL;TYPE=FAX,WORK:+1-919-676-9564
EMAIL;TYPE=INTERNET,PREF:Frank_Dawson@Lotus.com
EMAIL;TYPE=INTERNET:fdawson@earthlink.net
URL:http://home.earthlink.net/~fdawson
END:vCard


BEGIN:vCard
VERSION:3.0
FN:Tim Howes
ORG:Netscape Communications Corp.
ADR;TYPE=WORK:;;501 E. Middlefield Rd.;Mountain View;
CA; 94043;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-415-937-3419
TEL;TYPE=FAX,WORK:+1-415-528-4164
EMAIL;TYPE=INTERNET:howes@netscape.com
END:vCard

Note that both of these vCards are invalid since they lack the REQUIRED "N" property which is quite ironic, since these are the vCards of the authors themselves.

Nonetheless, these vCards can be represented by the following hCards:

<div class="vcard">
<a class="url fn" href="http://home.earthlink.net/~fdawson">Frank Dawson</a>
<div class="org">Lotus Development Corporation</div>
<div class="adr">
 <span class="type">work</span> address 
(<abbr class="type" title="postal">mail</abbr> and
 <abbr class="type" title="parcel">packages</abbr>):
 <div class="street-address">6544 Battleford Drive</div>
 <span class="locality">Raleigh</span>
 <span class="region">NC</span>
 <span class="postal-code">27613-3502</span>
 <div class="country-name">U.S.A.</div>
</div>
<div class="tel">
 <span class="value">+1-919-676-9515</span> 
(<abbr class="type" title="WORK">w</abbr>,
 <abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
 <span class="value">+1-919-676-9564</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
<a class="email" href="mailto:Frank_Dawson@Lotus.com">
 <span class="type">pref<span>erred</span> email</span>
</a>,
<a class="email" href="mailto:fdawson@earthlink.net">
 alternate email
</a>
</div>
<div class="vcard">
<a class="email fn" href="mailto:howes@netscape.com">Tim Howes</a>
<div class="org">Netscape Communications Corp.</div>
<div class="adr">
 <span class="type">work</span> address:
 <div class="street-address">501 E. Middlefield Rd.</div>
 <span class="locality">Mountain View</span>, 
 <span class="region">CA</span>
 <span class="postal-code">94043</span>
 <div class="country-name">U.S.A.</div>
</div>
<div class="tel">
 <span class="value">+1-415-937-3419</span> 
(<abbr class="type" title="WORK">w</abbr>,
 <abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)
</div>
<div class="tel">
 <span class="value">+1-415-528-4164</span>
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)
</div>
</div>

this hCards could be displayed as

Frank Dawson

Lotus Development Corporation

work address (mail and packages):

6544 Battleford Drive

Raleigh NC 27613-3502

U.S.A.

+1-919-676-9515 (w, vm)

+1-919-676-9564 (wf)

preferred email, alternate email

Tim Howes

Netscape Communications Corp.

work address:

501 E. Middlefield Rd.

Mountain View, CA 94043

U.S.A.

+1-415-937-3419 (w, vm)

+1-415-528-4164 (wf)

Test Cases

These are hCard examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).

Problem with BDAY Information

this example:

    <!-- birthday -->
    <div class="bday">
    <dt>Birthday</dt>
    <dd>
        <abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
    </dd>
    </div>

ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985". interesting is that the apple addressbook is still willing to accept it in this way.

case-INSENSITIVITY of type values

"home" vs. "Home"

this example works with X2V:

    <div class="tel">
    <dt>Phone (<span class="type">home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>

this does not, but should. but instead it becomes just TEL without a type in the vcard

    <div class="tel">
    <dt>Phone (<span class="type">Home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>

GEO parsing

The following hCard:

<div class="vcard">
  <span class="fn n">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span> 
       <span class="family-name">de Villamil</span> 
     </a>
  </span>
  <span class="nickname">neuro</span>
  <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref<span>erred</span> email</span>
  </a>
  <span class="org">Omatis</span>
  <span class="adr">
     <abbr class="type" title="dom">France</abbr>
     <span class="type">home</span> address
     <abbr class="type" title="postal">mail</abbr> and
     <abbr class="type" title="parcel">shipments</abbr>:
     <span class="street-address">12 rue Danton</span>
     <span class="locality">Le Kremlin-Bicetre</span>
     <span class="postal-code">94270</span>
     <span class="country-name">France</span>
  </span>
  <span class="geo">
     <abbr class="latitude" title="48.816667">N 48° 81.6667</abbr>
     <abbr class="longitude" title="2.366667">E 2° 36.6667</abbr>
  </span>
</div>

Should be translated into the following vCard:

BEGIN:VCARD
VERSION:3.0
URL:http://t37.net
ORG:Omatis;;
NICKNAME:neuro
FN:Fréderic de Villamil
N:de Villamil;Frederic;;Mr.;
EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net
ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France
GEO:48.816667;2.366667
END:VCARD

X2V currently (2005-12-18) fails to parse/export the GEO property at all.

Related Pages

hCard
hCard cheatsheet - hCard properties
hCard creator (feedback) - create your own hCard.
hCard authoring - learn how to add hCard markup to your existing contact info.
hCard examples - example usage of various classes within hCard.
hCard examples in the wild - an on-going list of websites which use hCards.
hcard-supporting-user-profiles - sites with user profiles marked up with hCard - a very common example.
hCard FAQ - if you have any questions about hCard, check here.
hCard implementations - websites or tools which either generate or parse hCards.
hCard parsing - normative details of how to parse hCards.
hCards and pages - semantic distinctions between different hCards on a page, and how to identify each
hcard-user-interface - techniques and issues surrounding user-interfaces to author, publish, and display hCards.
hCard profile - the XMDP profile for hCard
hCard singular properties - an explanation of the list of singular properties in hCard.
hCard tests - a wiki page with actual embedded hCards to try parsing.
hCard advocacy - encourage others to use hCard
hCard "to do" - jobs to do

The hCard specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. These thoughts, issues, and questions are kept in separate pages.

hCard brainstorming - brainstorms and other explorations relating to hCard.
- hcard-parsing-brainstorming - brainstorming specific to parsing of hCard
- geo brainstorming
hCard feedback - general feedback (as opposed to specific issues).
hCard issues - specific issues with the specification.
vCard errata - corrections to the vCard specification, which underlies hCard.
vCard suggestions - suggested improvements to the vCard specification.

hcard-examples-rfc2426

hCard examples

Authors

Instructive Examples

Authors of Pages and Posts

References to People and Organizations

hCard and XFN

References to People in Blog Posts

References to People in Blogrolls

New Types of Contact Info

AOL Instant Messenger (AIM)

Yahoo Messenger

MSN Messenger

XMPP (Jabber)

Skype

Site profiles

Organizations and Departments

RFC 2426 examples in hCard

2.4.2 VCARD

3.1.1 FN Type Definition

3.1.2 N Type Definition

Example 1

Example 2

3.1.3 NICKNAME Type Definition

Example 1

Example 2

3.1.4 PHOTO Type Definition

Example 1

Example 2

3.1.5 BDAY Type Definition

Example 1

Example 2

Example 3

3.2.1 ADR Type Definition

3.2.2 LABEL Type Definition

3.3.1 TEL Type Definition

3.3.2 EMAIL Type Definition

Example 1

Example 2

Example 3

3.3.3 MAILER Type Definition

3.4.1 TZ Type Definition

Example 1

Example 2

3.4.2 GEO Type Definition

3.5.1 TITLE Type Definition

3.5.2 ROLE Type Definition

3.5.3 LOGO Type Definition

Example 1

Example 2

3.5.4 AGENT Type Definition

Example 1

Example 2

3.5.5 ORG Type Definition

3.6.1 CATEGORIES Type Definition

Example 1

Example 2

3.6.2 NOTE Type Definition

3.6.3 PRODID Type Definition

3.6.4 REV Type Definition

Example 1

Example 2

3.6.5 SORT-STRING Type Definition

Example 1

Example 2

Example 3

Example 4

Example 5

3.6.6 SOUND Type Definition

Example 1

Example 2

3.6.7 UID Type Definition

3.6.8 URL Type Definition

3.7.1 CLASS Type Definition

Example 1

Example 2

Example 3

3.7.2 KEY Type Definition

7. Authors' Addresses

Test Cases