hCard Microformats for Structured Contact Data
In the early days of the web, contact information was presented as simple text, making it easy for humans to read but difficult for machines to process. To bridge this gap, microformats were developed. These are small patterns of HTML markup that allow software to identify specific pieces of data, such as names and telephone numbers, within a webpage.
One of the most prominent examples of this is the hCard, a microformat used to represent people, organizations, or venues. By applying specific class names to HTML elements, developers can transform a standard text profile into a machine-readable data source.
How hCard Markup Works
The hCard system relies on a wrapper class called vcard. This wrapper signals to software that the contained elements are not just coincidentally named but are part of a structured contact card. Inside this wrapper, specific properties are identified using dedicated class names.
Commonly used properties include:
- fn: The full name of the person or entity.
- org: The organization associated with the contact.
- nickname: A shorter or informal name.
- tel: The telephone number.
- url: The web address or personal website.
When representing an organization or a venue rather than an individual, the fn and org classes are applied to the same HTML element. For example, a reference to "Wikipedia" or "Wembley Stadium" would use <span class="fn org">.
Key Facts
- hCard is a microformat used to mark up contact information in HTML.
- The
vcardclass acts as the primary container for the data. - Specific classes like
fn,org, andtelidentify individual data points. - Organizations and venues combine the
fnandorgclasses on a single element. - The primary goal is to enable software to extract data for use in other applications.
Data Application and Utility
The true value of hCard markup lies in its interoperability. Because the data is structured, software—such as browser plug-ins—can automatically extract the information from a webpage. Once extracted, this data can be transferred seamlessly to other applications, such as a digital address book, without requiring the user to manually copy and paste details.
| Class Name | Description | Example Use Case |
|---|---|---|
| fn | Full Name | Person's name or Venue name |
| org | Organization | Company or Institution |
| tel | Telephone | Contact phone number |
| url | Web Address | Official website link |
| nickname | Nickname | Informal alias |
Frequently Asked Questions
What is the purpose of the vcard class?
The vcard class serves as a wrapper that indicates the enclosed elements form an hCard, ensuring that the internal classes are recognized as structured contact data rather than random CSS styling.
How do I mark up a company instead of a person?
For organizations or venues, you should apply both the fn and org classes to the same element, such as <span class="fn org">Company Name</span>.
Can hCard be used in a page header?
Yes, a profile using hCard markup may optionally be included within the header of a webpage.
What happens after software extracts hCard data?
Once a tool like a browser plug-in extracts the structured information, it can transfer that data into other applications, such as an electronic address book.
Are there other classes available for hCard?
Yes, in addition to the primary classes like fn and tel, other optional hCard classes exist to provide more detailed contact information.