# 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:

1. <html>
2. <head>
3. <title>Today's Speaker</title>
4. </head>
5. <body>
6. <p>Today's speaker is <cite>John Smith</cite></p>
7. </body>
8. </html>

- View example01 (no hCard) in a browser.

# fn Property

- Here is the HTML marked up using hCard properties:

1. <html>
2. <head>
3. <title>Today's Speaker</title>
4. </head>
5. <body>
6. <p>Today's speaker is
7. <cite class="vcard">
8. <span class="fn">John Smith</span>
9. </cite>
10. </p>
11. </body>
12. </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:

1. BEGIN:VCARD
2. PRODID:-//suda.co.uk//X2V 0.8.4.2 (BETA)//EN
3. SOURCE:(Best Practices states this should be the URL the vcard was transformed from)
4. NAME:Today's Speaker
5. VERSION:3.0
6. N;LANGUAGE=en;CHARSET=UTF-8:Smith;John;;;
7. FN;LANGUAGE=en;CHARSET=UTF-8:John Smith
8. 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:

1. 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:

1. <span class="fn">John will be our speaker. Dr. Smith</span> will talk about ...

# Value Property

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

1. <span class="vcard">
2. <span class="fn">
3. <span class="value">John </span>
4. will be our speaker. Dr.
5. <span class="value">Smith</span>
6. </span>
7. </span>
8. will talk about ...

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

1. 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:

1. <span class="fn">
2. <span class="value">John </span>
3. will be our speaker. Dr.
4. <span class="value">Smith</span>
5. </span>

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

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

# Design #2

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

1. <span class="fn">
2. <span class="value">John</span>
3. <span class="value"> </span>
4. will be our speaker. Dr.
5. <span class="value">Smith</span>
6. </span>

- Now three values are concatenated:

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

# Design #3 (Best Practice)

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

1. <abbr class="fn" title="John Smith">John</abbr>
2. 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:

1. <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:

1. <html>
2. <head>
3. <title>Today's Speaker</title>
4. </head>
5. <body>
6. <p>Today's speaker is <cite>Dr. John Q. Smith, M.D.</cite></p>
7. </body>
8. </html>

# n Property

- Here is the HTML marked up using hCard properties:

1. <html>
2. <head>
3. <title>Today's Speaker</title>
4. </head>
5. <body>
6. <p>Today's speaker is
7. <span class="vcard">
8. <cite class="fn n">
9. <span class="honorific-prefix">Dr.</span>
10. <span class="given-name">John</span>
11. <abbr class="additional-name" title="Quinlin">Q.</abbr>
12. <span class="family-name">Smith</span>,
13. <span class="honorific-suffix">M.D.</span>
14. </cite>
15. </span>
16. </p>
17. </body>
18. </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:

1. <cite class="fn n">
2. ...
3. </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