hCard Microformat (part 2)

Roger Costello

Click arrow key () to navigate to next page

Second Example using n

Example: markup this HTML text using the hCard properties:

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

Here is the marked up text:

<cite class="fn n">
Dr.
John
Philip
Paul
Stevenson,
Jr.,
M.D.,
A.C.P.
</cite>

Note the repeated additional-name and honorific-suffix properties.

hCard Profile

The HTML <head> element has an optional "profile" attribute.
The value of this attribute is a space-delimited list of URLs.
For each Microformat there is a URL to an HTML document which defines the properties and subproperties of the Microformat.
You must add the profile attribute to any HTML document that you markup with hCard (or any Microformat).
The URL for hCard is: http://www.w3.org/2006/03/hcard

<html>
<head profile="http://www.w3.org/2006/03/hcard">...</head>
<body>...</body>
</html>

Lab 1

Markup this HTML using hCard properties:

<head>
<title>Stephen Hawking</title>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
</head>
<body>
<h1>Stephen Hawking</h1>
Stephen William Hawking, CH, CBE, FRS (born 8 January 1942) is a theoretical physicist.
Hawking is the Lucasian Professor of Mathematics at the University of Cambridge, and a
Fellow of Gonville and Caius College, Cambridge. He is known for his contributions to
the fields of cosmology and quantum gravity, especially in the context of black holes,
and his popular works in which he discusses his own theories and cosmology in general.
These include the runaway popular science bestseller A Brief History of Time, which stayed
on the London Sunday Times bestseller list for a record-breaking 237 weeks.
</body>

Here is the HTML document: Stephen-Hawking.html

Lab 1 (cont.)

Name the new version of the HTML file: Stephen-Hawking-revised.html
After marking up the HTML with the hCard properties:
1. Validate your HTML using the W3C HTML validator: http://validator.w3.org/
2. Use Brian Suda's xhtml2vcard.xsl tool to extract the hCard and generate a vCard (.vcf file). In the lab 1 folder is run.bat. Double click on it, and it will invoke Brian's tool.

Determining the Value of fn, Case 1

Case 1: The contents of the fn element is pure text.
The value of fn is the pure text.
Example:

<cite class="fn">Dr. John Q. Smith, M.D.</cite>

The value of fn is:

Dr. John Q. Smith, M.D.

Determining the Value of fn, Case 2

Case 2: The fn element has one or more "value" elements.
Example:

John
is the speaker. Dr.
Smith
will talk on ...

The value of fn is the concatenation of the value elements.

concatenation('John ', 'Smith') = John Smith

Determining the Value of fn, Case 3

Case 3: The fn element has one or more child elements.
The value of fn is obtained as follows:
1. concatenate the text outside the child elements with the text inside the child elements
2. normalize the resulting string (i.e., strip leading and trailing spaces, replace consecutive white spaces with a single space)
Example:

John
Smith

Determining the Value of fn, Case 3

Before normalization:

'
John
Smith
'

After normalization, the value of fn is:

'John Smith'

Determining the Value of fn, Case 4

Case 4: The fn element is abbr.
The value of fn is the value of the abbr "title" attribute.
Example:

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

The value of fn is:

John Smith

nickname Property

nickname - use to specify the nickname of the person.
Example: markup this HTML text using the hCard properties:

<cite>Roger (Rocket) Clemens<cite> is the pitcher for the Houston Astros.

Here is the marked up text:

<cite class="fn n">
Roger
(Rocket)
Clemens
</cite>
is the pitcher for the Houston Astros.

View example03 (using nickname).

photo Property

photo - use to specify the URL to a photo of the person.
Example: markup this HTML "img" element using the hCard photo property:

<img src="http://www.xfront.com/images/Roger.gif" alt="Photo of Roger Costello" />

Here is the modified img element:

<img class="photo" src="http://www.xfront.com/images/Roger.gif" alt="Photo of Roger Costello" />

The value of the photo property is the URL found in the src attribute.
View example04 (using photo).

Alternative to the img Element

<object class="photo" data="http://www.xfront.com/images/Roger.gif">Photo of Roger Costello</object

The value of the photo property is the URL found in the data attribute.

bday Property

bday - use to specify the birthday of the person.
Example: markup this text using the hCard properties:

Stephen Hawking's birthday is January 8, 1942.

Here is the marked up text:

Stephen
Hawking's birthday is
<abbr class="bday" title="1942-01-08">January 8, 1942</abbr>

View example05 (using bday).

abbr Element

Notice the use of the abbr element in the last example:

<abbr class="bday" title="1942-01-08">January 8, 1942</abbr>

The content of abbr (January 8, 1942) is for humans.
The value of the title attribute (1942-01-08) is for machines.
hCard aggregators use the title as the value for bday, not the value of abbr.

Delivery Address Properties

Delivery address properties are used to provide address information for the person.
These are the delivery address properties:
- adr - structured address (the parts of the address are identified)
- label - the address, without the parts being identified

adr Property

adr - use to specify the components of an address. Further, the "type" subproperty is used to specify the type of address (home, work, etc).
Here are the subproperties of adr:
- post-office-box
- extended-address (suite number, apartment number, etc)
- street-address
- locality (e.g., city)
- region (e.g., state or province)
- postal-code (e.g., zipcode)
- country-name
- type - the value of this subproperty is one of these:
  - dom (domestic delivery address), parcel, home, work, pref (preferred delivery address)

adr Property

Example: markup this HTML text using the hCard properties:

The home address of John Q. Smith is:
10 Bolyston St.
Boston, MA 01210

adr Property

Here is the marked up text. View example06 (using adr).

The
home
address of
John
<abbr class="additional-name" title="Quinlan">Q.</abbr>
Smith
is:
10 Bolyston St.
Boston,
<abbr class="region" title="Massachusetts">MA</abbr>
01210

Using Multiple "type" Subproperties

Example: markup this HTML text:

The preferred delivery address is his home address ...

Here is the marked up text:

The
prefferred
delivery address is his
home address ...

Added Information

Example: markup this HTML text using the hCard properties:

Address:
10 Bolyston St.
Boston, MA 01210

Here is the marked up text:

<abbr class="type" title="pref,home">Address:</addr>
10 Bolyston St.
Boston,
<abbr class="region" title="Massachusetts">MA</abbr>
01210

Notice that I added information not present in the original HTML text; namely, that this is his preferred, home address.

type Values

If no type subproperty is specified then it defaults to type=intl, postal, parcel, work (i.e., the address is an international work address, for both postal and parcel deliveries).
The type values are case insensitive. Thus, home, Home, HOME are all equivalent.

adr Microformat

We have seen that adr is a "property" of the hCard Microformat.
adr is also a standalone Microformat. It can be used on its own, independent of hCard.
The adr profile URL is the same as hCard's profile URL.

Continued ...

Click here for Part 3 of the hCard Tutorial
Click here for Part 1 of the hCard Tutorial
Click here for Part 2 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 (part 2)

Roger Costello

Second Example using n

Second Example using n

hCard Profile

Lab 1

Lab 1 (cont.)

Determining the Value of fn, Case 1

Determining the Value of fn, Case 2

Determining the Value of fn, Case 3

Determining the Value of fn, Case 3

Determining the Value of fn, Case 4

nickname Property

photo Property

Alternative to the img Element

bday Property

abbr Element

Delivery Address Properties

adr Property

adr Property

adr Property

Using Multiple "type" Subproperties

Added Information

type Values

adr Microformat

Continued ...