WebMonkey Beta 2.0: The Web Developer's Resource

tutorials
reference
code library
blog
create a page
- all
- tutorials
- reference
- code
- blog

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

Make Contact With hCards

The action you have requested is limited to users in the group user.

You can view and copy the source of this page:

You're probably well familiar with vCards, the common data containers for exchanging address information, business locations and contact info. They're most often seen attached to e-mails, and most mail clients let you double-click on them and automatically add a person's contact information to your computer's address book.

But on the web, vCards are invisible to search engines, and webmail apps often can't import vCard data properly -- not such great news for fans of web-based mail apps. Luckily, a solution has emerged: the [http://microformats.org/wiki/hcard hCard microformat].

Designed to be a simple, open and distributed format, hCards are an extension of XHTML that makes it easy to represent people, companies, organizations, and places. All the data encapsulated in an hCard maps directly to the [http://www.ietf.org/rfc/rfc2426.txt vCard specification], so programs that can handle vCards can easily add hCard support as well (whether or not they do is up the creators).

''This article is a '''wiki.''' You can expand or enhance it by logging in and clicking on the Edit tab at the top of the page.''



===hCard Overview===

As with other microformats, the hCard uses semantic HTML or XHTML to add more meaning to your address data. Using a series of pre-defined class definitions, hCard creates a consistent format that can be easily recognized by search engine spiders and humans alike.

The root class name for hCard is "vcard," so the standard definition starts like this:

<pre>
<div class="vcard">
 <a class="url fn" href="http://yoursite.com/">Your Name</a>
</div>
</pre>

As you can see, the definition is wrapped in a <tt>&lt;div></tt> tag with the root class of <tt>vcard</tt>. The next line is an ordinary link to your website with your name as the link text. Note however the class definitions, <tt>url</tt> and <tt>fn</tt>. Obviously, <tt>url</tt> denotes the fact that this chunk of data is a URL. But what about that <tt>fn</tt> class?

It gets a little bit complicated due to some contradictions in the vCard spec, but generally you can think of "fn" as short for "formal name". There is also an <tt>n</tt> property that can be used, though <tt>n</tt> can be assumed to be the same as <tt>fn</tt> in most cases.

===Full Example===

So far, all we have is a name leading to a website. For many, that's all the contact info they're willing to give. But for the sake of example, let's consider Joe Monkey, an employee of ACME Banana company. Joe wants to offer up all of his contact information, so we would create an hCard that looks like this:

<pre>
<div id="hcard-Joe-Monkey" class="vcard">
 <span class="fn">Joe Monkey</span>
 <div class="org">ACME Banana</div>
 <div class="adr">
 <span class="type">Work</span>:
 <div class="street-address">314 Monkey Avenue</div>
 <span class="locality">Monkey Island</span>,
 <abbr class="region" title="California">CA</abbr>
 <span class="postal-code">94301</span>
 <div class="country-name">USA</div>
</div>
<div class="tel">
 <span class="type">Work</span> +1-555-555-5555
</div>
<div class="tel">
 <span class="type">Fax</span> +1-555-555-5555
</div>
<div>Email:
 <span class="email">joe@acmebanana.com</span>
</div>

<a class="url" href="aim:goim?screenname=monkeybites">AIM</a>
</pre>

Most of the class names here should be self-evident, save perhaps "locality", which just means the city or municipal area.

Note that in this case we're making a card for an individual at a company, so we've used separate definitions for <code>fn</code> and <code>org</code>. However, when dealing with a company listing it would be perfectly acceptable to combine the two into one line, like so:

<pre>
<span class="fn org">ACME Banana</span>
</pre>


===Class Properties===

The various class properties are as follows:

Required:

* fn
* n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)

Optional:

* nickname, sort-string
* url, email (type, value), tel2 (type, value)
* adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value), label
* geo (latitude, longitude), tz
* photo, logo, sound, bday
* title, role, org (organization-name, organization-unit)
* category, note
* class, key, mailer, uid, rev


===Making and Using hCards===

Even though it's human-readable and easy to write, there's no need to type out all your hCard markup by hand. The very handy [http://microformats.org/code/hcard/creator hCard creator] can handle the grunt work for you, generating some nice cut and paste code.

If you're displaying hCards dynamically (say as part of your favorite social network's profile page), just whip up a skeleton like the one above and replace the fake data with the variables from your database.

It's also worth noting that contact or profile pages aren't the only place you can use hCard. HCard markup works well inside a <code>&lt;cite></code> block, for instance when you're citing another blog and want to provide some basic contact info for the author of the blog.

===Further Reading===

* The Microformats Wiki has a few lists of [http://microformats.org/wiki/hcard-examples-in-wild example sites] where you can see embedded hCards in use. [http://microformats.org/wiki/hcard-examples-in-wild-pending Add your site] if you want.

* The [http://microformats.org/wiki/hcard hCard specification] lists more information about all the gritty details that can be held within hCards.

Return to Main Page.

Retrieved from "http://www.webmonkey.com/tutorial/Make_Contact_With_hCards"

/notation_help/

Text formatting

'''bold''' » bold

''italic'' » italic

<s>strike</s> » strike

<u>underline</u> » underline

Headings

==Large heading==

===Medium heading===

====Small heading====

Lists

* Bulleted point

** Sub-bulleted point

# Numbered point

## Sub-numbered point

Linking

[[Tutorial:title]] » Internal link to Tutorial

[[Reference:title]] » Internal link to Reference

[[Codelibrary:title]] » Internal link to Code Library

[[Tutorial:title | Text]] » Internal link with alternative text

[[Tutorial:title#anchor]] » Internal link with anchor

[http://host.com] » External link

[http://host.com#anchor] » External Link with anchor

[http://host.com Alt Text] » External link with alternative text

Images

[[Image:ImageName.jpg]] » uploaded image

[[image:ImageName.jpg|5px]] » set image size

[[image:ImageName.jpg|5px|left]] » aligh image left

[[image:ImageName.jpg|5px|left|Caption text]] » add caption text

[[Image:Wiki.png|thumb|Caption text]] » thumbnail image with caption text

Code

<code>inline code</code> » A typewriter font for monospace text

<pre>preformatted text</pre> » Block of Code

Details and full examples are in the full notation guide

WiredWebmonkey is a property of Wired Digital All text is shared under a Creative Commons License.

Wired Digital: Wired.com | Wired How-To Wiki | Reddit | Subscribe to WIRED Magazine

Subscribe to a magazine: