hCard is an early form of microformatting code See also: microformat
What is an hCard?
hCard is a standard for marking up contact details in webpages using familiar HTML class names. It maps directly to the vCard format (a standard for contact cards), but puts that data right in HTML so it’s both human-readable and machine-readable.
To use hCard, you wrap a container (often a div or span) with the class vcard. Inside that container, you use specific class names like fn (formatted name), tel (telephone), org (organization), adr (address), etc., to annotate each piece of contact info. A parser (such as a search engine or web tool) can then extract those details.
For example, a business’s address and phone number on its “Contact Us” page can be annotated with hCard. Search engines and browser tools can detect that structured data, which helps with contact extraction, better indexing, and potentially enhancing how that info appears in search results.
While newer structured data standards (like Schema.org) are more commonly used now, hCard is still supported and recognized (especially in microformat / legacy parsing contexts).
Frequently Asked Questions
- Does using hCard affect how the page looks?
No. hCard uses HTML class names only — it doesn’t change the visual display unless CSS or extra styles interfere. - Is hCard still relevant, given Schema.org and JSON-LD?
Yes, though it’s less common. Schema.org / JSON-LD are currently preferred for rich snippets, but hCard remains a valid microformat option and may still be parsed by tools. - Can I use both hCard and Schema markup together?
Yes. They serve different systems. Adding both doesn’t usually harm and may help capture more use cases. - What contact info should I mark up with hCard?
At minimum, your business name (fn), address (adr), phone number (tel), and website (url). Others (email, logo, hours) are optional. - Will search engines crawl hCard data?
Many search engines and tools can read microformats. hCard was supported historically for local listings and contact extraction. - Does hCard replace my contact page?
No. It’s a supplemental way to embed structured data in your existing contact content — the visible content remains intact. - How do I test if my hCard is correct?
Use microformat parsers or validation tools that check HTML for microformats. You can also view the HTML and ensure the right classes are used under.vcard.