hCard examples

(Difference between revisions)

Jump to: navigation, search
Current revision (08:46, 14 September 2017) (view source)
(Undo revision 66553 by Kritisingh (Talk) spam)
 
(8 intermediate revisions not shown.)
Line 1: Line 1:
-
HOW THING OUT
+
<entry-title>hCard examples</entry-title>
-
HOW ANYTHING OUT
+
 
-
HOW EVERYTHING OUT
+
Example [[hcard|hCards]].
-
HOW UNIVERSE OUT
+
 
-
HOW MAKE THING OUT
+
== Authors ==
-
HOW MAKE ANYTHING OUT
+
* [http://tantek.com/ Tantek Çelik]
-
HOW MAKE EVERYTHING OUT
+
* Brian Suda
-
HOW MAKE UNIVERSE OUT
+
 
-
HOW THING BE OUT
+
== Instructive Examples ==
-
HOW ANYTHING BE OUT
+
 
-
HOW EVERYTHING BE OUT
+
=== Authors of Pages and Posts ===
-
HOW UNIVERSE BE OUT
+
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 Per the HTML4.01 specification], authors should be using the <code>&lt;address&gt;</code> element to indicate the "contact information for a document or a major part of a document." E.g.
-
HOW MAKE THING BE OUT
+
 
-
HOW MAKE ANYTHING BE OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING BE OUT
+
<address>
-
HOW MAKE UNIVERSE BE OUT
+
<a href="http://tantek.com/">Tantek Çelik</a>
-
HOW THING OUT
+
</address>
-
HOW ANYTHING OUT
+
</nowiki></pre>
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
By adding [[hcard|hCard]] to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING OUT
+
<address class="vcard">
-
HOW MAKE UNIVERSE OUT
+
<a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
-
HOW THING BE OUT
+
</address>
-
HOW ANYTHING BE OUT
+
</nowiki></pre>
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
This could be displayed as:
-
HOW MAKE THING BE OUT
+
 
-
HOW MAKE ANYTHING BE OUT
+
[http://tantek.com/ Tantek Çelik]
-
HOW MAKE EVERYTHING BE OUT
+
 
-
HOW MAKE UNIVERSE BE OUT
+
This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.
-
HOW THING OUT
+
 
-
HOW ANYTHING OUT
+
See the [http://microformats.org/blog/ 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 <code>&lt;address class="vcard"&gt;</code> element like the example shown above.
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
=== References to People and Organizations ===
-
HOW MAKE THING OUT
+
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.:
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
<pre><nowiki>
-
HOW MAKE UNIVERSE OUT
+
<cite>
-
HOW THING BE OUT
+
<a href="http://meyerweb.com/">Eric Meyer</a>
-
HOW ANYTHING BE OUT
+
</cite> wrote a post
-
HOW EVERYTHING BE OUT
+
(<cite>
-
HOW UNIVERSE BE OUT
+
  <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
-
HOW MAKE THING BE OUT
+
  Tax Relief
-
HOW MAKE ANYTHING BE OUT
+
  </a>
-
HOW MAKE EVERYTHING BE OUT
+
</cite>)
-
HOW MAKE UNIVERSE BE OUT
+
about an unintentionally humorous letter he received from the
-
HOW THING OUT
+
<a href="http://irs.gov/">Internal Revenue Service</a>.
-
HOW ANYTHING OUT
+
</nowiki></pre>
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING OUT
+
<cite class="vcard">
-
HOW MAKE UNIVERSE OUT
+
<a class="fn url" href="http://meyerweb.com/">Eric Meyer</a>
-
HOW THING BE OUT
+
</cite> wrote a post
-
HOW ANYTHING BE OUT
+
(<cite>
-
HOW EVERYTHING BE OUT
+
  <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
-
HOW UNIVERSE BE OUT
+
  Tax Relief
-
HOW MAKE THING BE OUT
+
  </a>
-
HOW MAKE ANYTHING BE OUT
+
</cite>)
-
HOW MAKE EVERYTHING BE OUT
+
about an unintentionally humorous letter he received from the
-
HOW MAKE UNIVERSE BE OUT
+
<span class="vcard">
-
HOW THING OUT
+
<a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
-
HOW ANYTHING OUT
+
</span>.
-
HOW EVERYTHING OUT
+
</nowiki></pre>
-
HOW UNIVERSE OUT
+
 
-
HOW MAKE THING OUT
+
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.
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
This could be displayed as:
-
HOW MAKE UNIVERSE OUT
+
 
-
HOW THING BE OUT
+
''[http://meyerweb.com/ Eric Meyer]'' wrote a post (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') about an unintentionally
-
HOW ANYTHING BE OUT
+
humorous letter he received from the [http://irs.gov/ Internal Revenue Service].
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
==== a person who works for an organization ====
-
HOW MAKE THING BE OUT
+
People often associate themselves with a company or organization that they work for. E.g.
-
HOW MAKE ANYTHING BE OUT
+
 
-
HOW MAKE EVERYTHING BE OUT
+
<pre><nowiki>
-
HOW MAKE UNIVERSE BE OUT
+
<span class="vcard">
-
HOW THING OUT
+
<span class="fn">Jeremy Keith</span>,
-
HOW ANYTHING OUT
+
<span class="org">Clearleft</span>
-
HOW EVERYTHING OUT
+
</span>
-
HOW UNIVERSE OUT
+
</nowiki></pre>
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
Of course in this day and age, nearly everybody has a URL both for themselves and for their company. It's easy to add a URL for the person in the above hCard example:
-
HOW MAKE EVERYTHING OUT
+
 
-
HOW MAKE UNIVERSE OUT
+
<pre><nowiki>
-
HOW THING BE OUT
+
<span class="vcard">
-
HOW ANYTHING BE OUT
+
<a class="fn url" href="http://adactio.com/">Jeremy Keith</a>,
-
HOW EVERYTHING BE OUT
+
<span class="org">Clearleft</span>
-
HOW UNIVERSE BE OUT
+
</span>
-
HOW MAKE THING BE OUT
+
</nowiki></pre>
-
HOW MAKE ANYTHING BE OUT
+
 
-
HOW MAKE EVERYTHING BE OUT
+
But to add a URL to the company, there is no "org-url" property (nor should there be), instead, use modularity and a nested hCard for the company itself:
-
HOW MAKE UNIVERSE BE OUT
+
 
-
HOW THING OUT
+
<pre><nowiki>
-
HOW ANYTHING OUT
+
<span class="vcard">
-
HOW EVERYTHING OUT
+
<a class="fn url" href="http://adactio.com/">Jeremy Keith</a>,
-
HOW UNIVERSE OUT
+
<span class="org vcard"><a class="url fn org" href="http://clearleft.com">Clearleft</a></span>
-
HOW MAKE THING OUT
+
</span>
-
HOW MAKE ANYTHING OUT
+
</nowiki></pre>
-
HOW MAKE EVERYTHING OUT
+
 
-
HOW MAKE UNIVERSE OUT
+
Furthermore, if this person hCard is on a page that represent them (e.g. is a [[representative hCard]]), then you can also use the experimental [[rel-group]] relationship on the hyperlink to the company to indicate that the company is a "group" that the person belongs to.
-
HOW THING BE OUT
+
 
-
HOW ANYTHING BE OUT
+
<pre><nowiki>
-
HOW EVERYTHING BE OUT
+
<span class="vcard">
-
HOW UNIVERSE BE OUT
+
<a class="fn url" href="http://adactio.com/">Jeremy Keith</a>,
-
HOW MAKE THING BE OUT
+
<span class="org vcard"><a class="url fn org" rel="group" href="http://clearleft.com">Clearleft</a></span>
-
HOW MAKE ANYTHING BE OUT
+
</span>
-
HOW MAKE EVERYTHING BE OUT
+
</nowiki></pre>
-
HOW MAKE UNIVERSE BE OUT
+
 
-
HOW THING OUT
+
=== hCard and XFN ===
-
HOW ANYTHING OUT
+
==== References to People in Blog Posts ====
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
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 [http://gmpg.org/xfn/ XFN] (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING OUT
+
<cite class="vcard">
-
HOW MAKE UNIVERSE OUT
+
<a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">
-
HOW THING BE OUT
+
  Eric Meyer
-
HOW ANYTHING BE OUT
+
</a>
-
HOW EVERYTHING BE OUT
+
</cite> wrote a post
-
HOW UNIVERSE BE OUT
+
(<cite>
-
HOW MAKE THING BE OUT
+
  <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
-
HOW MAKE ANYTHING BE OUT
+
  Tax Relief
-
HOW MAKE EVERYTHING BE OUT
+
  </a>
-
HOW MAKE UNIVERSE BE OUT
+
</cite>)
-
HOW THING OUT
+
about an unintentionally humorous letter he received from the
-
HOW ANYTHING OUT
+
<span class="vcard">
-
HOW EVERYTHING OUT
+
<a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
-
HOW UNIVERSE OUT
+
</span>.
-
HOW MAKE THING OUT
+
</nowiki></pre>
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
It would be displayed the same as the previous example.
-
HOW MAKE UNIVERSE OUT
+
 
-
HOW THING BE OUT
+
==== References to People in Blogrolls ====
-
HOW ANYTHING BE OUT
+
Many bloggers are using XFN (often using an easy user interface like that built into [http://wordpress.org WordPress]) to explicitly indicate their relationships to the people in their blogrolls:
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
<pre><nowiki>
-
HOW MAKE THING BE OUT
+
<ul>
-
HOW MAKE ANYTHING BE OUT
+
<li>
-
HOW MAKE EVERYTHING BE OUT
+
  <a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a>
-
HOW MAKE UNIVERSE BE OUT
+
</li>
-
HOW THING OUT
+
<li>
-
HOW ANYTHING OUT
+
  <a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a>
-
HOW EVERYTHING OUT
+
</li>
-
HOW UNIVERSE OUT
+
</ul>
-
HOW MAKE THING OUT
+
</nowiki></pre>
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
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:
-
HOW MAKE UNIVERSE OUT
+
 
-
HOW THING BE OUT
+
<pre><nowiki>
-
HOW ANYTHING BE OUT
+
<ul>
-
HOW EVERYTHING BE OUT
+
<li class="vcard">
-
HOW UNIVERSE BE OUT
+
  <a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a>
-
HOW MAKE THING BE OUT
+
</li>
-
HOW MAKE ANYTHING BE OUT
+
<li class="vcard">
-
HOW MAKE EVERYTHING BE OUT
+
  <a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a>
-
HOW MAKE UNIVERSE BE OUT
+
</li>
-
HOW THING OUT
+
</ul>
-
HOW ANYTHING OUT
+
</nowiki></pre>
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
Which could be displayed as:
-
HOW MAKE THING OUT
+
* [http://meyerweb.com Eric Meyer]
-
HOW MAKE ANYTHING OUT
+
* [http://photomatt.net Matt Mullenweg]
-
HOW MAKE EVERYTHING OUT
+
 
-
HOW MAKE UNIVERSE OUT
+
This is referred to as [[hcard-xfn-supporting-friends-lists]], and is a key building block of [[social-network-portability]].
-
HOW THING BE OUT
+
 
-
HOW ANYTHING BE OUT
+
For more information on XFN, see the [http://gmpg.org/xfn/ XFN home page], [http://gmpg.org/xfn/join joining XFN], and [http://gmpg.org/xfn/background background on XFN].
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
The technique is used in the [http://factorycity.net/projects/wp-microformatted-blogroll/ WP Microformatted Blogroll] plugin for WordPress.
-
HOW MAKE THING BE OUT
+
 
-
HOW MAKE ANYTHING BE OUT
+
=== New Types of Contact Info ===
-
HOW MAKE EVERYTHING BE OUT
+
Since [[vCard3]] was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.
-
HOW MAKE UNIVERSE BE OUT
+
 
-
HOW THING OUT
+
Does this mean that vCard (and hence hCard) must be extended to represent these?
-
HOW ANYTHING OUT
+
 
-
HOW EVERYTHING OUT
+
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.
-
HOW UNIVERSE OUT
+
 
-
HOW MAKE THING OUT
+
<div class="discussion">
-
HOW MAKE ANYTHING OUT
+
* vCard ''has'' been [ftp://ftp.rfc-editor.org/in-notes/rfc4770.txt extended] for this. Should we adopt the new "IMPP" property? [[User:TobyInk|TobyInk]] 10:03, 17 Mar 2008 (PDT)
-
HOW MAKE EVERYTHING OUT
+
** 'impp' is in [[vCard4]] and included in [[uf2#h-card|h-card]]. It may be used for some (but not all, not yet anyway) of the following. [[User:Tantek|Tantek]] 18:17, 24 November 2012 (UTC)
-
HOW MAKE UNIVERSE OUT
+
</div>
-
HOW THING BE OUT
+
 
-
HOW ANYTHING BE OUT
+
There are several protocols documented below - for more see this post:
-
HOW EVERYTHING BE OUT
+
* 2010-01-15 [http://beradrian.wordpress.com/2010/01/15/special-links/ Special links: phone calls, sms, e-mails, iPhone and Android apps, …]
-
HOW UNIVERSE BE OUT
+
 
-
HOW MAKE THING BE OUT
+
==== AOL Instant Messenger (AIM) ====
-
HOW MAKE ANYTHING BE OUT
+
[http://dashboard.aim.com/aim AOL Instant Messenger] (AIM) ids can be represented using the <code>aim:</code> protocol.  Many  who publish their AIM ids do so with clickable URLs e.g.:
-
HOW MAKE EVERYTHING BE OUT
+
 
-
HOW MAKE UNIVERSE BE OUT
+
<pre><nowiki>
-
HOW THING OUT
+
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
-
HOW ANYTHING OUT
+
</nowiki></pre>
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING OUT
+
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
-
HOW MAKE UNIVERSE OUT
+
</nowiki></pre>
-
HOW THING BE OUT
+
 
-
HOW ANYTHING BE OUT
+
==== Gtalk ====
-
HOW EVERYTHING BE OUT
+
For Gtalk you can use URLs like:
-
HOW UNIVERSE BE OUT
+
 
-
HOW MAKE THING BE OUT
+
<code>gtalk:chat?jid=USERNAME&from_jid=YOURNAME</code>
-
HOW MAKE ANYTHING BE OUT
+
 
-
HOW MAKE EVERYTHING BE OUT
+
The USERNAME and YOURNAME should be your.account@gmail.com. The parameter from_jid is optional and it should be specified only if you use multiple accounts.
-
HOW MAKE UNIVERSE BE OUT
+
 
-
HOW THING OUT
+
In addition to <code>chat</code>, you can also use the following action(s):
-
HOW ANYTHING OUT
+
* <code>call</code> - to make a voice call
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
==== Yahoo! Messenger ====
-
HOW MAKE THING OUT
+
Similarly, [http://messenger.yahoo.com/ Yahoo! Instant Messenger] (YIM) ids can be represented using the <code>ymsgr:</code> protocol.  And similarly many publish their YIM ids as clickable URLs e.g.:
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
<pre><nowiki>
-
HOW MAKE UNIVERSE OUT
+
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
-
HOW THING BE OUT
+
</nowiki></pre>
-
HOW ANYTHING BE OUT
+
 
-
HOW EVERYTHING BE OUT
+
Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
-
HOW UNIVERSE BE OUT
+
 
-
HOW MAKE THING BE OUT
+
<pre><nowiki>
-
HOW MAKE ANYTHING BE OUT
+
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
-
HOW MAKE EVERYTHING BE OUT
+
</nowiki></pre>
-
HOW MAKE UNIVERSE BE OUT
+
 
-
HOW THING OUT
+
In addition to <code>sendIM</code>, you can also use the following actions:
-
HOW ANYTHING OUT
+
* <code>addfriend</code>
-
HOW EVERYTHING OUT
+
* <code>call</code>
-
HOW UNIVERSE OUT
+
 
-
HOW MAKE THING OUT
+
==== MSN Messenger ====
-
HOW MAKE ANYTHING OUT
+
[http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids can be represented using the <code>msnim:</code> protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:
-
HOW MAKE EVERYTHING OUT
+
 
-
HOW MAKE UNIVERSE OUT
+
<pre><nowiki>
-
HOW THING BE OUT
+
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
-
HOW ANYTHING BE OUT
+
</nowiki></pre>
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
-
HOW MAKE THING BE OUT
+
 
-
HOW MAKE ANYTHING BE OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING BE OUT
+
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
-
HOW MAKE UNIVERSE BE OUT
+
</nowiki></pre>
-
HOW THING OUT
+
 
-
HOW ANYTHING OUT
+
In addition to <code>chat</code>, you can also use the following actions:
-
HOW EVERYTHING OUT
+
* <code>add</code> - to add a contact
-
HOW UNIVERSE OUT
+
* <code>voice</code> - to make a voice call
-
HOW MAKE THING OUT
+
* <code>video</code> - to make a video call
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
See related [[hcard-examples-issues#MSN_Messenger|issue(s)]].
-
HOW MAKE UNIVERSE OUT
+
 
-
HOW THING BE OUT
+
==== XMPP (Jabber) ====
-
HOW ANYTHING BE OUT
+
[http://www.xmpp.org/ Extensible Messaging and Presence Protocol (XMPP)] ids can be represented using the <code>xmpp:</code> protocol, e.g.:
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
<pre><nowiki>
-
HOW MAKE THING BE OUT
+
<a class="url" href="xmpp:username@jabberservice.com">IM with username@jammerservice.com</a>
-
HOW MAKE ANYTHING BE OUT
+
</nowiki></pre>
-
HOW MAKE EVERYTHING BE OUT
+
 
-
HOW MAKE UNIVERSE BE OUT
+
The protocol allows much richer URLs, see [http://www.faqs.org/rfcs/rfc4622.html RFC4622].
-
HOW THING OUT
+
 
-
HOW ANYTHING OUT
+
There are many current [http://www.jabber.org/clients clients supporting the protocol].
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
==== Skype ====
-
HOW MAKE THING OUT
+
Accounts on the Voice-over-IP service [http://www.skype.com Skype] can be represented using the <code>skype:</code> protocol. It can be used to open a chat session or make a Skype call.
-
HOW MAKE ANYTHING OUT
+
 
-
HOW MAKE EVERYTHING OUT
+
<pre><nowiki>
-
HOW MAKE UNIVERSE OUT
+
<a href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
-
HOW THING BE OUT
+
</nowiki></pre>
-
HOW ANYTHING BE OUT
+
 
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
<pre><nowiki>
-
HOW MAKE THING BE OUT
+
<a href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
-
HOW MAKE ANYTHING BE OUT
+
</nowiki></pre>
-
HOW MAKE EVERYTHING BE OUT
+
 
-
HOW MAKE UNIVERSE BE OUT
+
Thus for hCard, we could adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
-
HOW THING OUT
+
 
-
HOW ANYTHING OUT
+
<pre><nowiki>
-
HOW EVERYTHING OUT
+
<a class="url" href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
-
HOW UNIVERSE OUT
+
</nowiki></pre>
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
<pre><nowiki>
-
HOW MAKE EVERYTHING OUT
+
<a class="url" href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
-
HOW MAKE UNIVERSE OUT
+
</nowiki></pre>
-
HOW THING BE OUT
+
 
-
HOW ANYTHING BE OUT
+
==== ICQ ====
-
HOW EVERYTHING BE OUT
+
[http://www.icq.com/ ICQ] does not have a URL scheme.  Rather ICQ links on the web use HTTP hyperlinks to download a resource of content-type <code>application/x-icq</code> which then the operating system opens with the user's ICQ client.
-
HOW UNIVERSE BE OUT
+
 
-
HOW MAKE THING BE OUT
+
Thus we can markup those HTTP hyperlinks with the content-type set explicitly to communicate the ICQ semantic:
-
HOW MAKE ANYTHING BE OUT
+
 
-
HOW MAKE EVERYTHING BE OUT
+
<pre><nowiki>
-
HOW MAKE UNIVERSE BE OUT
+
<a class="url"
-
HOW THING OUT
+
  type="application/x-icq"
-
HOW ANYTHING OUT
+
  href="http://www.icq.com/people/cmd.php?uin=[ICQNUMBER]&amp;action=message">
-
HOW EVERYTHING OUT
+
Contact with ICQ</a>
-
HOW UNIVERSE OUT
+
</nowiki></pre>
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
Replacing [ICQNUMBER] with the user's actual ICQ number.
-
HOW MAKE EVERYTHING OUT
+
 
-
HOW MAKE UNIVERSE OUT
+
=== Site profiles ===
-
HOW THING BE OUT
+
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 published in an hCard as well.
-
HOW ANYTHING BE OUT
+
 
-
HOW EVERYTHING BE OUT
+
* <code>[http://del.icio.us delicious]:</code>
-
HOW UNIVERSE BE OUT
+
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;Robert Bachmann's links&lt;/a&gt;</code>
-
HOW MAKE THING BE OUT
+
* <code>[http://flickr.com Flickr]:</code>
-
HOW MAKE ANYTHING BE OUT
+
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code>
-
HOW MAKE EVERYTHING BE OUT
+
** <code>&lt;a class="url" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>
-
HOW MAKE UNIVERSE BE OUT
+
* <code>[http://technorati.com/ Technorati]:</code>
-
HOW THING OUT
+
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code>
-
HOW ANYTHING OUT
+
* Add more here...
-
HOW EVERYTHING OUT
+
** ....
-
HOW UNIVERSE OUT
+
 
-
HOW MAKE THING OUT
+
==== listing your other profiles ====
-
HOW MAKE ANYTHING OUT
+
The most common case of sites listing other profiles is a blogger listing their own other profiles, or a site enabling a user to list on his or her profile on that site, links to his or her other profiles.  Since clearly the author/user is indicating that all those profiles mean the same person, it's best to mark them up with [[XFN]]'s <code>rel="me"</code> for explicit identity consolidation, e.g. if those links were on Tantek's blog or other social network profile:
-
HOW MAKE EVERYTHING OUT
+
 
-
HOW MAKE UNIVERSE OUT
+
* <code>[http://del.icio.us delicious]:</code>
-
HOW THING BE OUT
+
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;Robert Bachmann's links&lt;/a&gt;</code>
-
HOW ANYTHING BE OUT
+
* <code>my [http://flickr.com Flickr]:</code>
-
HOW EVERYTHING BE OUT
+
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code>
-
HOW UNIVERSE BE OUT
+
** <code>&lt;a rel="me" class="url" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>
-
HOW MAKE THING BE OUT
+
*<code>[http://30boxes.com/user/8214086/Lucyloo/ 30boxes]:</code>
-
HOW MAKE ANYTHING BE OUT
+
* <code>[http://technorati.com/ Technorati]:</code>
-
HOW MAKE EVERYTHING BE OUT
+
** <code>my &lt;a rel="me" class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code>
-
HOW MAKE UNIVERSE BE OUT
+
* Add more here...
-
HOW THING OUT
+
 
-
HOW ANYTHING OUT
+
** ....
-
HOW EVERYTHING OUT
+
 
-
HOW UNIVERSE OUT
+
Such explicit user-driven identity consolidation is also a key building block for [[social-network-portability]] that is further explained in the context of [[hcard-xfn-supporting-friends-lists]].
-
HOW MAKE THING OUT
+
 
-
HOW MAKE ANYTHING OUT
+
=== Canonical Profiles on Sites ===
-
HOW MAKE EVERYTHING OUT
+
Sites sometimes have different pages for the "home" page for a person, and that person's user profile page.
-
HOW MAKE UNIVERSE OUT
+
 
-
HOW THING BE OUT
+
For example Flickr has:
-
HOW ANYTHING BE OUT
+
* your home page is at a URL like: <code>http://flickr.com/photos/</code> followed by your username, e.g.:
-
HOW EVERYTHING BE OUT
+
** http://flickr.com/photos/tantek/
-
HOW UNIVERSE BE OUT
+
* your profile page is at a URL like: <code>http://flickr.com/people/</code> followed by your username, e.g.:
-
HOW MAKE THING BE OUT
+
** http://flickr.com/people/tantek/
-
HOW MAKE ANYTHING BE OUT
+
 
-
HOW MAKE EVERYTHING BE OUT
+
In addition, sites often have a <em>canonical</em> URL for a person, and several alternate URLs.
-
HOW MAKE UNIVERSE BE OUT
+
 
-
HOW THING OUT
+
As noted above, links to these URLs inside hCards that represent those people should have classname "url". 
-
HOW ANYTHING OUT
+
 
-
HOW EVERYTHING OUT
+
In addition, such link(s) in hCards to the canonical URL for a person on that site should also have the classname of "uid".  This technique was proposed Ryan King at the first [[events/2007-08-28-social-network-portability-today|Social Network Portability Today lunchtime meetup]].
-
HOW UNIVERSE OUT
+
 
-
HOW MAKE THING OUT
+
Building on the example(s) from the previous section:
-
HOW MAKE ANYTHING OUT
+
* [http://flickr.com Flickr]:
-
HOW MAKE EVERYTHING OUT
+
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code>
-
HOW MAKE UNIVERSE OUT
+
** <code>&lt;a rel="me" class="url uid" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>
-
HOW THING BE OUT
+
 
-
HOW ANYTHING BE OUT
+
Such a "url" + "uid" property could also be used by a site as that person's [[OpenID]] URL.
-
HOW EVERYTHING BE OUT
+
 
-
HOW UNIVERSE BE OUT
+
This work has been developed into [[representative-hcard|representative hCards]]. Go there for the latest on this line of thinking.
-
HOW MAKE THING BE OUT
+
 
-
HOW MAKE ANYTHING BE OUT
+
=== Organizations and Departments ===
-
HOW MAKE EVERYTHING BE OUT
+
 
-
HOW MAKE UNIVERSE BE OUT
+
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:
 +
 
 +
<pre><nowiki>
 +
<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>
 +
</nowiki></pre>
 +
 
 +
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".
 +
 
 +
<pre><nowiki>
 +
<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>
 +
</nowiki></pre>
 +
 
 +
Note that by nesting the org inside the address we avoided having to duplicate the department name.
 +
 
 +
=== Lists of Organizations ===
 +
Similar to [[hcard-examples#References_to_People_in_Blogrolls|lists of people]], lists of organizations (e.g. music bands) should use a list (unordered unless there is a specific reason to order it) with list items and hyperlink to the respective organization home pages.
 +
 
 +
E.g. this simple [[POSH]]:
 +
 
 +
<pre><nowiki>
 +
<ul>
 +
<li>
 +
  <a href="http://microformats.org/">microformats.org</a>
 +
</li>
 +
<li>
 +
  <a href="http://technorati.com/">Technorati</a>
 +
</li>
 +
<li>
 +
  <a href="http://www.w3.org/">World Wide Web Consortium</a>
 +
  (W3C)
 +
  </a>
 +
</li>
 +
</ul>
 +
</nowiki></pre>
 +
 
 +
can be easily enhanced with hCard:
 +
 
 +
<pre><nowiki>
 +
<ul>
 +
<li class="vcard">
 +
  <a class="fn org url" href="http://microformats.org/">microformats.org</a>
 +
</li>
 +
<li class="vcard">
 +
  <a class="fn org url" href="http://technorati.com/">Technorati</a>
 +
</li>
 +
<li class="vcard">
 +
  <a class="fn org url" href="http://www.w3.org/">World Wide Web Consortium</a>
 +
  (<span class="nickname">W3C</span>)
 +
  </a>
 +
</li>
 +
</ul>
 +
</nowiki></pre>
 +
 
 +
== <nowiki>RFC 2426</nowiki> examples in hCard ==
 +
See: [[hcard-examples-rfc2426]]
 +
 
 +
== Test Cases ==
 +
 
 +
These are [[hcard|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:
 +
 
 +
<pre>
 +
    <!-- birthday -->
 +
    <div class="bday">
 +
    <dt>Birthday</dt>
 +
    <dd>
 +
        <abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
 +
    </dd>
 +
    </div>
 +
</pre>
 +
 
 +
ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985" [in what? this statement appears meaningless]. interesting is that the apple addressbook is still willing to accept it in this way.
 +
 
 +
* Perhaps caused by an HTML parsing error, as <code>&lt;dt></code> and <code>&lt;dd></code> are not allowed as children of <code>&lt;div></code>.
 +
 
 +
=== case-INSENSITIVITY of type values ===
 +
 
 +
* "home" vs. "Home"
 +
 
 +
this example works with X2V:
 +
 
 +
<pre>
 +
    <div class="tel">
 +
    <dt>Phone (<span class="type">home</span>)</dt>
 +
    <dd><span class="value">+438123418</span></dd>
 +
    </div>
 +
</pre>
 +
 
 +
this does not, but should. but instead it becomes just TEL without a type in the vcard
 +
 
 +
<pre>
 +
    <div class="tel">
 +
    <dt>Phone (<span class="type">Home</span>)</dt>
 +
    <dd><span class="value">+438123418</span></dd>
 +
    </div>
 +
</pre>
 +
 
 +
=== GEO parsing ===
 +
The following hCard:
 +
 
 +
<pre><nowiki>
 +
<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><span>erred 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>
 +
</nowiki>
 +
</pre>
 +
 
 +
Should be translated into the following vCard:
 +
 
 +
<pre><nowiki>
 +
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
 +
</nowiki></pre>
 +
 
 +
X2V currently (2005-12-18) fails to parse/export the GEO property at all.
 +
 
 +
== Related Pages ==
 +
* [[hcard-examples-issues]]
 +
{{hcard-related-pages}}
 +
 
 +
== Translations ==
 +
* [[hcard-examples-zh|漢語]]

Current revision


Example hCards.

Contents

Authors

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.

a person who works for an organization

People often associate themselves with a company or organization that they work for. E.g.

<span class="vcard">
 <span class="fn">Jeremy Keith</span>, 
 <span class="org">Clearleft</span>
</span>

Of course in this day and age, nearly everybody has a URL both for themselves and for their company. It's easy to add a URL for the person in the above hCard example:

<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, 
 <span class="org">Clearleft</span>
</span>

But to add a URL to the company, there is no "org-url" property (nor should there be), instead, use modularity and a nested hCard for the company itself:

<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, 
 <span class="org vcard"><a class="url fn org" href="http://clearleft.com">Clearleft</a></span>
</span>

Furthermore, if this person hCard is on a page that represent them (e.g. is a representative hCard), then you can also use the experimental rel-group relationship on the hyperlink to the company to indicate that the company is a "group" that the person belongs to.

<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, 
 <span class="org vcard"><a class="url fn org" rel="group" href="http://clearleft.com">Clearleft</a></span>
</span>

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>

Which could be displayed as:

This is referred to as hcard-xfn-supporting-friends-lists, and is a key building block of social-network-portability.

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

The technique is used in the WP Microformatted Blogroll plugin for WordPress.

New Types of Contact Info

Since vCard3 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.

  • vCard has been extended for this. Should we adopt the new "IMPP" property? TobyInk 10:03, 17 Mar 2008 (PDT)
    • 'impp' is in vCard4 and included in h-card. It may be used for some (but not all, not yet anyway) of the following. Tantek 18:17, 24 November 2012 (UTC)

There are several protocols documented below - for more see this post:

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>

Gtalk

For Gtalk you can use URLs like:

gtalk:chat?jid=USERNAME&from_jid=YOURNAME

The USERNAME and YOURNAME should be your.account@gmail.com. The parameter from_jid is optional and it should be specified only if you use multiple accounts.

In addition to chat, you can also use the following action(s):

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>

In addition to sendIM, you can also use the following actions:

MSN Messenger

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>

In addition to chat, you can also use the following actions:

See related issue(s).

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 many current clients supporting the protocol.

Skype

Accounts on the Voice-over-IP service 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>

ICQ

ICQ does not have a URL scheme. Rather ICQ links on the web use HTTP hyperlinks to download a resource of content-type application/x-icq which then the operating system opens with the user's ICQ client.

Thus we can markup those HTTP hyperlinks with the content-type set explicitly to communicate the ICQ semantic:

<a class="url"
   type="application/x-icq" 
   href="http://www.icq.com/people/cmd.php?uin=[ICQNUMBER]&action=message">
 Contact with ICQ</a>

Replacing [ICQNUMBER] with the user's actual ICQ number.

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 published in an hCard as well.

listing your other profiles

The most common case of sites listing other profiles is a blogger listing their own other profiles, or a site enabling a user to list on his or her profile on that site, links to his or her other profiles. Since clearly the author/user is indicating that all those profiles mean the same person, it's best to mark them up with XFN's rel="me" for explicit identity consolidation, e.g. if those links were on Tantek's blog or other social network profile:

Such explicit user-driven identity consolidation is also a key building block for social-network-portability that is further explained in the context of hcard-xfn-supporting-friends-lists.

Canonical Profiles on Sites

Sites sometimes have different pages for the "home" page for a person, and that person's user profile page.

For example Flickr has:

In addition, sites often have a canonical URL for a person, and several alternate URLs.

As noted above, links to these URLs inside hCards that represent those people should have classname "url".

In addition, such link(s) in hCards to the canonical URL for a person on that site should also have the classname of "uid". This technique was proposed Ryan King at the first Social Network Portability Today lunchtime meetup.

Building on the example(s) from the previous section:

Such a "url" + "uid" property could also be used by a site as that person's OpenID URL.

This work has been developed into representative hCards. Go there for the latest on this line of thinking.

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.

Lists of Organizations

Similar to lists of people, lists of organizations (e.g. music bands) should use a list (unordered unless there is a specific reason to order it) with list items and hyperlink to the respective organization home pages.

E.g. this simple POSH:

<ul>
 <li>
  <a href="http://microformats.org/">microformats.org</a>
 </li>
 <li>
  <a href="http://technorati.com/">Technorati</a>
 </li>
 <li>
  <a href="http://www.w3.org/">World Wide Web Consortium</a>
  (W3C)
  </a>
 </li>
</ul>

can be easily enhanced with hCard:

<ul>
 <li class="vcard">
  <a class="fn org url" href="http://microformats.org/">microformats.org</a>
 </li>
 <li class="vcard">
  <a class="fn org url" href="http://technorati.com/">Technorati</a>
 </li>
 <li class="vcard">
  <a class="fn org url" href="http://www.w3.org/">World Wide Web Consortium</a>
  (<span class="nickname">W3C</span>)
  </a>
 </li>
</ul>

RFC 2426 examples in hCard

See: hcard-examples-rfc2426

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" [in what? this statement appears meaningless]. interesting is that the apple addressbook is still willing to accept it in this way.

case-INSENSITIVITY of type values

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

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.

Translations

hCard examples was last modified: Thursday, September 14th, 2017

Views