hCard Microformat (part 4)

Roger Costello

Click arrow key () to navigate to next page

Organizational Properties

These properties are used to provide information about the organization or organizational units that the person is associated with:
- title (job title)
- role
- logo
- agent
- org

title Property

title - use to specify the job title of the person.
Example: markup this HTML text:

Job Title: Director of Research and Development

Here is the marked up text:

Job Title:
<div class="title">Director of Research and Development</div>

role Property

role - use to specify the business category.
Example: markup this HTML text:

He is a manager

Here is the marked up text:

He is a
<div class="role">manager</div>

logo Property

logo - use to specify a URL to an image of a logo (such as the logo of the company that the person works at)
Example: markup this HTML text:

<img src="http://www.acompany.com/logo.gif" alt="company logo" />

Here is the marked up text:

<img class="logo" src="http://www.acompany.com/logo.gif" alt="company logo" />

agent Property

agent - use to specify another person who will act on behalf of the individual, e.g., a secretary. Often the value of this property is a link to the agent's vCard, e.g.,

<a class="agent" href="http://www.acompany.com/kathy.vcf" />My secretary</a>

org Property

org - use to specify the name of the organization that the person is associated with (e.g., company name) and the name of the organizational unit associated with the person (e.g., department name). This is accomplished using these two subproperties:
- organization-name
- organization-unit
Example: markup this HTML text:

Company: The ABC Company
Department: Web Technologies

Here is the marked up text:

<div class="org">
Company: <div class="organization-name">The ABC Company</div>
Department: <div class="organization-unit">Web Technologies</div>
</div>

org Optimization

If you just have the name of the organization then you can omit the organization-name subproperty and embed the name directly in the org element.
Thus, this:

<div class="org">
<div class="organization-name">The ABC Company</div>
</div>

is equivalent to this:

<div class="org">The ABC Company</div>

Lab 5

In Lab 2 you marked up the below HTML text. Enrich it further with the things you just learned.

<body>
<h1>Robert (Jake) Williams</h1>
<h2>VITA</h2>
<dl>
<dt>Home Address</dt>
<dd>1641 Beacon Street</dd>
<dd>Philadelphia, Pennsylvania 19123-7774</dd>
<dd>215/321-7654</dd>
</dl>
<dl>
<dt>Business Address</dt>
<dd>Pennsylvania Commission on Children and Youth</dd>
<dd>1436 Market Street</dd>
<dd>Philadelphia, Pennsylvania 19125-7707</dd>
<dd>215/321-7222</dd>
</dl> ... (continued on next slide)

Lab 5 (cont.)

Markup this HTML using hCard properties:

...
<dl>
<dt>Reference</dt>
<dd>Dr. Marie D. Fredericks</dd>
<dd>Dean, College Of Education Temple University</dd>
<dd>Philadelphia, Pennsylvania 19125-0021</dd>
<dd>215/321-7111</dd>
</dl>
</body>

Here is the HTML document: Vita-Robert-Williams.html

Lab 5 (cont.)

Name the new version of the HTML file: Vita-Robert-Williams-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 5 folder is run.bat. Double click on it, and it will invoke Brian's tool.

Explanatory Properties

These properties are used to provide additional information (such as you might write on a business card):
- category (repeatable)
- note (repeatable)
- rev
- sort-string
- sound
- uid
- url

category Property

category - use to specify application category information about the hCard.
Example: a travel agent's business card (i.e., hCard) has a category of "travel agent":

<span class="category">Travel Agent</span>

note Property

note - use to specify supplemental information, e.g.,

<span class="note">The fax number is operational 0800 to 1715 EST, Mon-Fri</span>

rev Property

rev - use to specify the datetime that the hCard was last revised.

<abbr class="rev" title="2006-11-05T18:33:10-05Z">Nov. 5, 2006, at 6:33pm</abbr>

sort-string Property

sort-string - use to specify the part of the person's name which is to be used when sorting (such as in white pages).
Example: consider this name: Robert Pau Shou Chang. We can indicate that Pau is the sort string:

<div class="fn n">
<span class="given-name">Robert</span>
<span class="additional-name">Shou Chang</span>
<span class="family-name sort-string">Pau</span>
</div>

sound Property

sound - use to specify the proper pronunciation of the person's name. The value is a URL to an audio file.

<a class="sound" href="http://www.example.org/jsmith.mpeg">Pronunciation of my name</a>

uid Property

uid - use to specify a globally unique identifier for the person. A "type" subproperty can be used to specify the format of the identifier. The format should be in an IANA registered format.

<span class="uid">20061109-080027-40000F192713-0052</span>

url Property

url - use to specify a URL associated with the person, e.g., the URL to the person's employer, or to his/her personal Web site. Example:

<a class="url fn" href="http://www.ABC_Company.com">John Smith</a>

Note 1: the value of the "url" property is the value of href.
Note 2: the value of the "fn" property is the value of the <a> element.
This is a common pattern:

<a class="url fn n" href="http://www.ABC_Company.com">
<span class="given-name">John</span>
<span class="family-name">Smith</span>
</a>

<a> Element Design Pattern

For properties that have a URL value: if the anchor element is used then the value of the property is the value of the href attribute.

Security Properties

These properties are used to express security information regarding the hCard:
- class (classification)
- key (public key)

class Property

class - used to express the intent of the hCard owner for general access to the information described by the hCard:

<span class="class">PUBLIC</span>

Note: the other legal values are: PRIVATE, CONFIDENTIAL

key Property

key - use to specify the person's public key. A "type" subproperty may be used to specify the format of the public key.

<span class="key">djfksdlfjsdf-wefsdpfse-=we-wkfsdl;0q02...</span>

Finished with the Properties!

We have covered all the properties that you can use with hCard.
Recall that the only mandatory property is fn. The rest are optional. Of course, it is to your benefit to use as many properties as possible - the more you use, the more semantically rich your Web page is because there is more information for Web tools to utilize.
The following slides contain additional information about hCard, and information about hCard tools.

Continued ...

Click here for Part 5 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 3 of the hCard Tutorial
Click here for Part 4 of the hCard Tutorial