hcard-authoring

hCard authoring

This page contains useful tips and guidelines for how to author hCards, either from scratch, or by adding markup to existing content.

Goal: The goal of this document is to provide some good intuitive guidelines that should make it as easy and as quick as possible for any web author to create hCards or add hCard markup to existing content.

Audience: Web authors and designers. This document is written for easy consumption and understanding by any web designer who knows at least enough (X)HTML and CSS to use HTML class names on elements and write CSS selectors that apply styles to those class names. Please help with clarifying/simplifying this document accordingly.

Author(s): Tantek Çelik

Creating new hCards

Start with the hCard creator, and for additional fields and properties (e.g. telephone numbers, instant messaging contacts), see the hCard examples page.

Adding hCard markup to existing content

Minimal Markup Changes

The important thing to keep in mind when adding hCard to existing content, is the fact that hCard was designed so that it could be added with minimal (most often no) changes to the existing presentation of the page. Thus keep this in mind: change as little markup as possible. If you want to fix various pages to be valid XHTML etc., that's fine, but that's an orthogonal goal to adding hCard, and may be better done as a separate step (either before or after).

In all cases below, where it says to add an element with class name of "xyz", if you can find an existing element that precisely surrounds the necessary content, then re-use that element and simply add the class name "xyz" to it (by adding it to the class attribute on the existing element, or by adding a new class attribute class="xyz" to elements without a class attribute).

Find People or Organizations

Start with looking for all mentions of people or organizations on a page. All of those are potential hCards. Even more so if they are linked to their respective URLs (e.g. home pages / blogs).

If a person (or organization, henceforth shortened to just "person/org") is mentioned several times on a page, consider marking up the mention which is the most detailed, definitive, or otherwise thorough as an hCard. Ideally you might want to mark up all instances of a person/org as hCards, but for now, just keep it simple and markup the most representative instance. (Perhaps the most "definitive" instance, which could also then be marked up with a <dfn> element around the name of the person/org for additional semantic XHTML goodness.)

Determine The Surrounding Element for Each

For each person/org that you want to turn into an hCard, find the smallest element that contains all the info about that person/org, and no info about any other person/org.

Add the class name "vcard" to that element.

If there is no such element (perhaps the nearest enclosing element contains more than one person/org), then add a <span class="vcard">...</span> or <div class="vcard">...</div> that wraps the info about about that person/org and just that person/org.

The rest of the markup for this hCard will go inside that element with the class name "vcard".

Titles

If the person's job title is mentioned, mark it up with <span class="title">...</span>.

Though typical vCards/hCards have only a single job title, if someone has several job titles listed say in a comma delimited list, just markup the whole lot of them with one big <span class="title">...</span>.

View source on the W3C Technical Plenary Agenda for examples of people with multiple titles.

Other affiliations

As vCard seems to imply a model of a person only being associated with one organization (at least certainly that's how most vcard-implementations appear to be written), consider placing other affiliations and info about the person into <span class="title">...</span> elements. You can have more than one; converters will simply append them all in source order.

View source on the W3C Technical Plenary Agenda for examples of people with additional affiliations (such as W3C Working Groups) marked up inside "note" elements.

Sometimes text in a document near a person/contact will explain *why* that person should be contacted. Such information is also useful to have in a "note" element.

View source on the O'Reilly ETech 2006 invite for examples of people with additional "For ... " reasons marked up as "note" elements.

Set the lang when different

In an English language document (lang="en"), be sure to markup the element surrounding any non-English names of people, companies, titles, notes etc. with a lang attribute with the appropriate value.

E.g. Spanish names in an english document should be marked up with (lang="es") on their elements.

View source on the W3C Technical Plenary Agenda, specifically Ignacio Marín, for an example of a person and org marked up with a lang attribute.

More tips and guidelines

Feel free to add more tips that experience has taught you while marking up hCards, even if all you add is a brief catch phrase that reminds you.

• ...
• ...

See Also

• hCard
• hCard profile
• hCard examples
• hcalendar-authoring