hcard-examples-rfc2426

hCard examples

Example hCards.

Authors

• Tantek Çelik
• Brian Suda

RFC 2426 examples in hCard

• In the process of creating 1:1 hCard examples for each example in RFC 2426.

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-prefixes">Mr.</span>
 <span class="given-name">John</span>
 <span class="additional-names">Quinlan</span>
 <span class="family-name">Public</span>, 
 <span class="honorific-suffixes">Esq.</span>
</span>

with singular class names instead of plural (see Issue 1 in hcard-parsing).

<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-prefixes">Dr.</span>
 <span class="given-name">John</span>
 <ul class="additional-names">
  <li>Philip</li>
  <li>Paul</li>
 </ul>
 <span class="family-name">Stevenson</span>, 
 <ul class="honorific-suffixes">
  <li>Jr.</li>
  <li>M.D.</li>
  <li>A.C.P.</li>
 </ul>
</span>

and with this CSS2(.1) style sheet:

.n ul,.n li { display:inline; list-style:none }
.honorific-suffixes li:before { 
  content:", "; margin-left:-.7ex; 
}

In a CSS2(.1) compliant browser, this hCard fragment would be displayed as:

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

In a CSS1 compliant browser (lacking some CSS2 features), this hCard fragment would be displayed as:

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

Note the lack of commas, which we are unable to insert inbetween the items on the list (since no character data is allowed directly inside the <ul>), and the lack of CSS2(.1) generated content support means the style rule that inserts them doesn't take effect either.

However, with singular class names instead of plural (see Issue 1 in hcard-parsing).

<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>

without any special style sheet, this hCard fragment would be displayed as:

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

This is another good reason to go with singular class names.

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:

<ul class="nickname"><li>Jim</li><li>Jimmie</li></ul>

and with this CSS2(.1) style sheet:

ul.nickname,.nickname li { display:inline; list-style:none }
.nickname li:before { 
  content:", "; margin-left:-.7ex; 
}
.nickname li:first-child:before { 
  content:""; margin-left: 0;
}

In a CSS2(.1) compliant browser, this hCard fragment would be displayed as:

Jim, Jimmie

In a CSS1 compliant browser (lacking some CSS2 features), this hCard fragment would be displayed as:

Jim Jimmie

Note the lack of a comma, which we are unable to insert inbetween the item(s) on the list (since no character data is allowed directly inside the <ul>), and the lack of CSS2(.1) generated content support means the style rule that inserts them doesn't take effect either.

The class name "nickname" is already singular, and if we simply treat it as such per issue 1 in hcard-parsing, we can encode this hCard fragment as:

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

without any special style sheet, this hCard fragment would be displayed as:

Jim, Jimmie

This is another good reason to go with singular class names, or in this case, a singular interpretation of the class name.

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> 
 <abbr class="type" title="msg">with voicemail:</abbr>
 +1-213-555-1234
</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="emai 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="categories">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:

<ul class="categories">
 <li>INTERNET</li>
 <li>IETF</li>
 <li>INDUSTRY</li>
 <li>INFORMATION TECHNOLOGY</li>
</ul>

this hCard fragment could be displayed as:

• INTERNET
• IETF
• INDUSTRY
• INFORMATION TECHNOLOGY

and with this CSS2(.1) style sheet:

ul.categories,.categories li { display:inline; list-style:none }
.categories li:before { 
  content:", "; margin-left:-.7ex; 
}
.categories li:first-child:before { 
  content:""; margin-left: 0;
}

in a CSS2(.1) compliant browser, this hCard fragment would be displayed as:

INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY

In a CSS1 compliant browser (lacking some CSS2 features), this hCard fragment would be displayed as:

INTERNET IETF INDUSTRY INFORMATION TECHNOLOGY

Note the lack of commas, which we are unable to insert inbetween the item(s) on the list (since no character data is allowed directly inside the <ul>), and the lack of CSS2(.1) generated content support means the style rule that inserts them doesn't take effect either. Note also that "INFORMATION TECHNOLOGY" appears to be two categories (INFORMATION and TECHNOLOGY) since it is only separated from other categories uing a space.

But with singular class names instead of plural (see Issue 1 in hcard-parsing).

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

without any special style sheet, this hCard fragment would be displayed as:

INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY

This is another good reason to go with singular class names.

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.

Other

• See hcard-brainstorming for more examples (which may eventually be moved here) and analysis.