1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
VCards are a common format for exchanging address information, business locations, place data and more. But on the web vCards become invisible to search engine spiders and webmail apps often can't import them straight from a download link, which is why the [http://microformats.org/wiki/hcard hCard microformat] was created.
Designed to be a simple, open and distributed format, hCards are an extension of (X)HTML that makes it easy to represent people, companies, organizations, and places. All the data encapsulated in 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).
##Overview##
As with other microformats, 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 spiders and people alike can easily recognize.
The root class name for hCard is "vcard," so the standard definition starts like this:
<div class="vcard">
<a class="url fn" href="http://yoursite.com/">Your Name</a>
</div>
As you can see the definition is wrapped in a <code><div></code> tag with the root class of vcard. The next line is an ordinary link to your website with your name as the link text. Note however the class definitions, <code>url</code> and <code>fn</code>. Obviously url denotes the fact that this chunk of data is a url, but what about that <code>fn</code> class.
It gets a little bit complicated, do some contradictions in the vCard spec, but generally you can think of fn as short for formal name. There is also an <code>n</code> property that can be used, though <code>n</code> can be assumed to be the same as <code>fn</code> 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. In this case we might create an hCard that looks like this:
<code>
<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>
</code>
Most of the class names here should be self-evident, save perhaps locality, which just means the city of 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:
<code>
<span class="fn org">ACME Banana</span>
</code>
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
##The hCard Creator##
There's no need to write 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 hot new 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><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.
Once you've got a basic handle on hCards, go ahead and put them in the wild and add your site to list of example on the Microformats Wiki. If you're feeling extra frisky have a read through the [http://microformats.org/wiki/hcard hCard specification] for all the gritty details.
|
