hCard Microformat

Roger Costello

Click arrow key () to navigate to next page

Purpose of the hCard Microformat

The purpose of the hCard Microformat is to provide white-pages/business-card information about a person:
- formatted and structured name
- delivery address
- email address
- telephone number(s)
- employer
- photograph
- logo
hCard is a 1-to-1 HTML representation of vCard [RFC 2426]

Additional Information

Besides the traditional information found in a white-pages entry or a business card, other information can be provided:
- date of birth
- an audio clip describing the pronunciation of the person's name
- longitude and latitude geo-positioning information associated with the person
- date and time that the information was last updated
- annotations (such as is often written on a business card)
- URL to a Website
- public key information
The only information that is required in an hCard is the formatted name (e.g., Roger Costello). Everything else is optional.

Person, Company, Organization, Place

Actually, hCard is for more than just representing information about a person.
hCard is also for representing information about a company, or an organization, or a place.
Most of my examples will show the use of hCard for representing a person. Towards the end of this tutorial I will provide some examples of using hCard for representing a company, organization, or place.

Categories of Properties

"Properties" are used to provide information about a person.
The properties fall into six categories:
- Identification Properties - info about the person's name
- Delivery Address Properties - address info
- Telecommunications Addressing Properties - telephone numbers, email addresses
- Geographical Properties - lat/lon position
- Organization Properties - employer info
- Explanatory Notes Properties - annotation info

Identification Properties

Identification properties are used to capture information associated with the identification and naming of a person.
These are the identification properties:
- fn - formatted name
- n - name (use to identify the parts of the name)
- nickname
- photo
- bday - birthday

fn Property

fn - use to specify a string corresponding to the name of the person, as you might see on a nameplate.
Example: markup this HTML text using the hCard properties:

<html>
<head>
<title>Today's Speaker</title>
</head>
<body>
Today's speaker is <cite>John Smith</cite>
</body>
</html>

View example01 (no hCard) in a browser.

fn Property

Here is the HTML marked up using hCard properties:

<html>
<head>
<title>Today's Speaker</title>
</head>
<body>
Today's speaker is
<cite class="vcard">
John Smith
</cite>
</body>
</html>

View example01 (with hCard) in a browser.

No Impact to Presentation

The hCard markup has no impact on how the HTML is rendered by a browser.
But the hCard markup has a huge (positive) impact on the ability of Web tools to meaningfully process the information in the HTML document.

vCard Format

hCard is an HTML version of the vCard standard.
vCard is a text format.
Below is the vCard for the hCard shown on the previous slide:

BEGIN:VCARD
PRODID:-//suda.co.uk//X2V 0.8.4.2 (BETA)//EN
SOURCE:(Best Practices states this should be the URL the vcard was transformed from)
NAME:Today's Speaker
VERSION:3.0
N;LANGUAGE=en;CHARSET=UTF-8:Smith;John;;;
FN;LANGUAGE=en;CHARSET=UTF-8:John Smith
END:VCARD

hCard to vCard Converter

Brian Suda has written an XSLT stylesheet (xhtml2vcard.xsl) which extracts the hCard in an XHTML document and outputs the corresponding vCard.
Open example01 (with hCard) in your favorite XSLT tool and then style the XHTML document using xhtml2vcard.xsl (note: you will need to change the XHTML document's filename suffix from html to xml).

Is your hCard Markup Correct?

How do you know if you have correctly marked up your HTML with the hCard properties?
Run Brian's tool and see if it produces output (a vCard). If you get no output then you know that your markup is incorrect.

Name is Scattered About the HTML

Sometimes the name is scattered in the HTML text; for example:

John will be our speaker. Dr. Smith will talk about ...

We don't want to do this, as fn would contain text that is not relevant:

John will be our speaker. Dr. Smith will talk about ...

Value Property

The hCard pre-defined "value" property can be used to identify the relevant parts:

John
will be our speaker. Dr.
Smith
will talk about ...

The value of fn is the concatenation of the value properties:

fn = concat('John ', 'Smith') = John Smith

Note: the "value" property can be used with any Microformat property, not just the fn property.

Design #1

Did you notice the space after John:

John
will be our speaker. Dr.
Smith

This enabled the given name and family name to be separated when they are concatenated:

fn = concat('John ', 'Smith') = John Smith

Design #2

Rather than inserting a space after John, use a value property with a space value:

John
will be our speaker. Dr.
Smith

Now three values are concatenated:

fn = concat('John', ' ', 'Smith') = John Smith

Design #3 (Best Practice)

Use an abbr element. The title attribute contains the formatted name:

<abbr class="fn" title="John Smith">John</abbr>
will be our speaker. Dr. Smith

An hCard tool will use the value of the title attribute (John Smith) as the value of fn.

abbr Design Pattern

The Microformat community has defined a number of design patterns.
The example on the last slide, using abbr, is a design pattern.
In the abbr design pattern you specify what is to be the value of the hCard property in the title attribute. For example:

<abbr class="fn" title="John Smith">John</abbr>

The hCard property is fn. The value of fn is John Smith.

n Property

n - use to specify the parts of a person's name (given name, family name, etc).
n has these subproperties:
- family-name
- given-name
- additional-name (repeatable)
- honorific-prefix (repeatable)
- honorific-suffix (repeatable)

n Property

Example: markup this HTML using hCard properties:

<html>
<head>
<title>Today's Speaker</title>
</head>
<body>
Today's speaker is <cite>Dr. John Q. Smith, M.D.</cite>
</body>
</html>

n Property

Here is the HTML marked up using hCard properties:

<html>
<head>
<title>Today's Speaker</title>
</head>
<body>
Today's speaker is
<cite class="fn n">
Dr.
John
<abbr class="additional-name" title="Quinlin">Q.</abbr>
Smith,
M.D.
</cite>
</body>
</html>

Optimization: Multiple Class Names

The value of a class attribute is a space-separated list of names. The previous example used two class names with the cite element:

<cite class="fn n">
...
</cite>

Read as: "The contents of the cite element is a fn (formatted name) and a n (structured name)."

View example02 (with optimized hCard) in a browser.

Restrictions on Multiple Class Names

You cannot combine the root (vcard) with any of its properties
- e.g., class="vcard fn" is illegal
You cannot combine a property with its subproperties
- e.g., class="n given-name" is illegal

Continued ...

Click here for Part 2 of the hCard Tutorial
Click here for Part 1 of the hCard Tutorial
Click here for Part 3 of the hCard Tutorial
Click here for Part 4 of the hCard Tutorial
Click here for Part 5 of the hCard Tutorial

08 March 2007

The hCard Microformat

hCard Microformat

Roger Costello

Purpose of the hCard Microformat

Additional Information

Person, Company, Organization, Place

Categories of Properties

Identification Properties

fn Property

fn Property

No Impact to Presentation

vCard Format

hCard to vCard Converter

Is your hCard Markup Correct?

Name is Scattered About the HTML

Value Property

Design #1

Design #2

Design #3 (Best Practice)

abbr Design Pattern

n Property

n Property

n Property

Optimization: Multiple Class Names

Restrictions on Multiple Class Names

Continued ...