HCard

Last updated July 06, 2024

hCard is a microformat for publishing the contact details (which might be no more than the name) of people, companies, organizations, and places, in HTML, Atom, RSS, or arbitrary XML.^[1] The hCard microformat does this using a 1:1 representation of vCard (RFC 2426) properties and values, identified using HTML classes and rel attributes.

In May 2009, Google announced that they would be parsing the hCard and hReview and hProduct microformats, and using them to populate search-result pages.^[2] In September 2010 Google announced their intention to surface hCard, hReview information in their local search results.^[3] In February 2011, Facebook began using hCard to mark up event venues.^[4]

Example

Consider the HTML:

<ul><li>JosephDoe</li><li>Joe</li><li>TheExampleCompany</li><li>604-555-1234</li><li><ahref="http://example.com/">http://example.com/</a></li></ul>

With microformat markup, that becomes:

<ulclass="vcard"><liclass="fn">JosephDoe</li><liclass="nickname">Joe</li><liclass="org">TheExampleCompany</li><liclass="tel">604-555-1234</li><li><aclass="url"href="http://example.com/">http://example.com/</a></li></ul>

A profile may optionally be included in the page header:

<linkrel="profile"href="http://microformats.org/profile/hcard">

Here the properties fn,^[5]nickname, org (organization), tel (telephone number) and url (web address) have been identified using specific class names; and the whole thing is wrapped in class="vcard" which indicates that the other classes form an hcard, and are not just coincidentally named. If the hCard is for an organization or venue, the fn and org classes are used on the same element, as in <span class="fn org">Wikipedia</span> or <span class="fn org">Wembley Stadium</span>. Other, optional hCard classes also exist.

It is now possible for software, for example browser plug-ins, to extract the information, and transfer it to other applications, such as an address book.

Geo and adr

The Geo microformat is a part of the hCard specification, and is often used to include the coordinates of a location within an hCard.

The adr part of hCard can also be used as a stand-alone microformat.

Live example

Here are the Wikimedia Foundation's contact details as of February 2023, as a live hCard:

Wikimedia Foundation, Inc.
1 Montgomery Street, Suite 1600
San Francisco, CA94104
USA
Phone: +1-415-839-6885
Email: info@wikimedia.org
Fax: +1-415-882-0495

The mark-up (wrapped for clarity) used is:

<divclass="vcard"><divclass="fn org">WikimediaFoundationInc.</div><divclass="adr"><divclass="street-address">1MontgomeryStreet,Suite1600</div><div><spanclass="locality">SanFrancisco</span>,<abbrclass="region"title="California">CA</abbr><spanclass="postal-code">94104</span></div><divclass="country-name">USA</div></div><div>Phone:<spanclass="tel">+1-415-839-6885</span></div><div>Email:<spanclass="email">info@wikimedia.org</span></div><divclass="tel"><spanclass="type">Fax</span>: <spanclass="value">+1-415-882-0495</span></div></div>

In this example, the fn and org properties are combined on one element, indicating that this is the hCard for an organization, not a person.

Other attributes

Other commonly used hCard attributes include

bday –a person's birth date
email
honorific-prefix
honorific-suffix
label –for non-granular addresses
logo
nickname
note –free text
photo
post-office-box

Related Research Articles

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

vCard, also known as VCF, is a file format standard for electronic business cards. vCards can be attached to e-mail messages, sent via Multimedia Messaging Service (MMS), on the World Wide Web, instant messaging, NFC or through QR code. They can contain name and address information, phone numbers, e-mail addresses, URLs, logos, photographs, and audio clips.

The name Atom applies to a pair of related Web standards. The Atom Syndication Format is an XML language used for web feeds, while the Atom Publishing Protocol is a simple HTTP-based protocol for creating and updating web resources.

The noindex value of an HTML robots meta tag requests that automated Internet bots avoid indexing a web page. Reasons why one might want to use this meta tag include advising robots not to index a very large database, web pages that are very transitory, web pages that are under development, web pages that one wishes to keep slightly more private, or the printer and mobile-friendly versions of pages. Since the burden of honoring a website's noindex tag lies with the author of the search robot, sometimes these tags are ignored. Also the interpretation of the noindex tag is sometimes slightly different from one search engine company to the next.

XHTML Friends Network (XFN) is an HTML microformat developed by Global Multimedia Protocols Group that provides a simple way to represent human relationships using links. XFN enables web authors to indicate relationships to the people in their blogrolls by adding one or more keywords as the rel attribute to their links. XFN was the first microformat, introduced in December 2003.

Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data. They allow software to process the information reliably by having set classes refer to a specific type of data rather than being arbitrary.

hCalendar is a microformat standard for displaying a semantic (X)HTML representation of iCalendar-format calendar information about an event, on web pages, using HTML classes and rel attributes.

In HTML, the standard markup language for documents designed to be displayed in a web browser, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

GRDDL is a markup format for Gleaning Resource Descriptions from Dialects of Languages. It is a W3C Recommendation, and enables users to obtain RDF triples out of XML documents, including XHTML. The GRDDL specification shows examples using XSLT, however it was intended to be abstract enough to allow for other implementations as well. It became a Recommendation on September 11, 2007.

RDFa or Resource Description Framework in Attributes is a W3C Recommendation that adds a set of attribute-level extensions to HTML, XHTML and various XML-based document types for embedding rich metadata within Web documents. The Resource Description Framework (RDF) data-model mapping enables its use for embedding RDF subject-predicate-object expressions within XHTML documents. It also enables the extraction of RDF model triples by compliant user agents.

Geo is a microformat used for marking up geographical coordinates in HTML. Coordinates are expected in angular units of degrees and geodetic datum WGS84. Although termed a "draft" specification, the format is a de facto standard, stable and in widespread use; not least as a sub-set of the published hCalendar and hCard microformat specifications, neither of which is still a draft.

Web Slices are a web feed technology based on the hAtom Microformat that allows users to subscribe to portions of a web page. Microsoft developed the Web Slice format, and published a specification under their Open Specification Promise. The specification is not published by any independent standards body. Introduced in Internet Explorer 8 Beta 1, Web Slices can be previewed in a fly-out window. As of 2012, Internet Explorer 8 and 9 were the only browsers to support Web Slices natively, although Mozilla Firefox had support via an add-on called webchunks.

hRecipe is a draft microformat for publishing details of recipes using (X)HTML on web pages, using HTML classes and rel attributes. In its simplest form, it can be used to identify individual foodstuffs, because the only required properties are fn and an ingredient, which can be the same:

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to Microdata because it allows them to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and microformats.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users. Since 2015, Mikael Geletsyan is responsible for UX at Emmet. The tools have been incorporated into several popular text editors, as well as some plug-ins developed by the Emmet team and others implemented independently. However, Emmet is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.

XHTML+RDFa is an extended version of the XHTML markup language for supporting RDF through a collection of attributes and processing rules in the form of well-formed XML documents. XHTML+RDFa is one of the techniques used to develop Semantic Web content by embedding rich semantic markup. Version 1.1 of the language is a superset of XHTML 1.1, integrating the attributes according to RDFa Core 1.1. In other words, it is an RDFa support through XHTML Modularization.

Schema.org is a reference website that publishes documentation and guidelines for using structured data mark-up on web-pages. Its main objective is to standardize HTML tags to be used by webmasters for creating rich results about a certain topic of interest. It is a part of the semantic web project, which aims to make document mark-up codes more readable and meaningful to both humans and machines.

Leaflet is a JavaScript library used to build web mapping applications. It allows developers without a GIS background to display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked.

GoodRelations is a Web Ontology Language-compliant ontology for Semantic Web online data, dealing with business-related goods and services. It handles the individual relationships between a buyer, a seller and the products and services offered. In November 2012, it was integrated into the Schema.org ontology.

References

↑ Sikos, Leslie (2011). Web Standards: Mastering HTML5, CSS3, and XML. Apress. ISBN 978-1430240419 . Retrieved 2013-05-10.
↑ Goel, Kavi; Guha, Ramanathan V.; Hansson, Othar (2009-05-12). "Introducing Rich Snippets". Google Webmaster Central Blog. Retrieved 2009-05-25.
↑ Blumenthal, Mike (2010-09-22). "Google Announces Full Support for Microformats in Local". Understanding Google Maps. Retrieved 2010-09-30.
↑ Protalinski, Emil (2011-02-18). "Facebook adds hCalendar and hCard microformats to Events". ZDNet. Archived from the original on February 19, 2011. Retrieved 24 March 2011.
↑ no friendly name defined in the specification http://microformats.org/wiki/hcard#Property_List, but one might think of it as "full name", "formal name", "formatted name", or "family name"