If you have a new question to ask, please consider first asking your question on the microformats irc channel (preferably) or the microformats-discuss mailing list. New questions and answers should be added to the end of the list. If you have a new question but not an answer, please add it to hCard issues.
Editing this Page
Please do not use "?" or other punctuation in the headers - it helps to keep the URLs to their fragment identifiers shorter and easier to read, copy/paste etc. See how-to-play for more wiki editing guidelines.
What is the point of hCard
What is the point of hCard to people, businesses, etc.?
- hCard helps people publish up-to-date contact details (e.g. see A Christmas hCard From Me To You for how to do so as a greeting card)
- hCards help businesses: Microformats for business owners
- hCards help with SEO:
- content marked up with hCard can be converted to vCards by spiders and other aggregators, and can be used in vCard application and services. Getting Semantic With Microformats, Part 3: hCard
How is hCard different than just links
How is hCard different than just links?
- hCard can be used to express that a name and a link (and potentially additional information) are semantically connected and refer to a specific person, place, or organization.
How does hCard help users
How does hCard help users, e.g. how does it improve the user experience in browsers more than just providing name and email as text?
- In most browsers (e.g. Flock, Firefox, Internet Explorer, Safari with various plugins), users can detect when there are hCards (or other common microformats) on a page, and easily download that hCard contact info in its entirety, rather than having to copy and paste each individual name, email address, link etc.
- See also: Browser Integration
How can I style hCards with CSS
How can I style hCard with CSS?
- 24 ways: Styling hCards with CSS
- Introduction to hCard, Part two: Styling hCards
- 24 ways: A Christmas hCard From Me To You
How do I convert hCards to vCards for download on a site
Is there any live way to convert hCards to vCards for download on a site? In other words, I have added hCard to my page, but i'd like my users to have a 'download vCard' button.
- Short answer, use the H2VX hCard to vCard service in a hyperlink, e.g.:
<a href="http://h2vx.com/vcf/YOURURLHERE">download vCard</a>
Consider using more user-friendly text as well, like Add to Address Book. There are many examples of this in the hCard Examples in the Wild page. Note that the H2VX hCard to vCard service is based on the open source XSLT "X2V" by Brian Suda and others. If you want, you can install X2V yourself and run your own local converter.
Should I use ADDRESS for hCards
Should I use the more semantic
<address> element for my hCards?
<address>element is more semantic, but it is too specifically semantic for most hCard uses. The poorly named
<address>element really means <contact-info-for-this-web-page>. The HTML4 definition of the ADDRESS element says it is used "to supply contact information for a document or a major part of a document such as a form." Therefore,
<address>should be used for an hCard ONLY IF that hCard represents the contact information for the page or major part thereof. One example of such a usage is on Tantek's blog. Another way of saying this is the following two statements: Every <address> on a page SHOULD be an hCard. But not every hCard should be an
In short, DO NOT use
<address>to markup physical/street/mailing addresses in general. Only use it to markup the contact information for the page (or major part thereof), and when doing so, use it to markup the entire contact information (via <address class="vcard">), not just a physical/street/mailing address for the contact.
For more on different types of significant hCards for pages, and semantics distinctions among them, see hcards-and-pages.
Why is adr property necessary
- First, <address> DOES NOT MEAN "address", please read previous FAQ answer first and thoroughly! Second, "adr" is about physical addresses, whereas <address> is meant specifically for the contact information for the page or major part thereof. They are totally different.
Why is url property necessary
Why is it necessary to put class name "url" on URL elements in the hCard when those hyperlinks already start with "http://", and that is enough to distinguish them from email links?
- The classname "url" is necessary to explicitly distinguish hyperlinks that are URL elements for the hCard, from other hyperlinks that may be related to the item or otherwise in the same containing element but should not be included in the hCard. Common links that may appear in the document but not be contact information are action related links (download data, add to friends list, etc.) contact hyperlinks (email, internal site messaging, autodialers), as well as hyperlinks to photos, or other random hyperlinks that happen to be inside the hCard.
Can an hCard have multiple URLs
Can an hCard have multiple URLs?
- Yes hCards may have multiple URLs. Note that "url" is not one of the hcard-singular-properties.
I have a problem with serving a vCard vcf file
I have a problem with serving a vCard .vcf file that has the info from my /contact/ page from my website. E.g. browsers just display the text of the vCard .vcf file instead of downloading it.
The easiest thing to do and support (especially with more and more vCard consumers out there with their own quirks) is to:
- Add hCard markup to your /contact/ page where you already have your contact info visible in the content. See also the hCard creator which is a useful tool for learning how hCard markup works.
- Change the link to your vCard .vcf file to point to: http://h2vx.com/vcf/http://yourwebsite.example.com/contact/
This way you won't have to worry about duplicate data either - just update the content on your contact page marked up in hCard and anyone that gets your vCard will automatically get your updated info without you having to worry about updating separate file.
How do I support an existing vCard URL
I already have a vCard that I keep up-to-date. I don't want to change any references to it because it might break something else, what can I do?
- You can use .HTACCESS to rewrite links to your vCard to a webservice that converts a page to the vCard dynamically, to do this you need to add something similar to your .htaccess file
RewriteRule ^path/to/old.vcf http://h2vx.com/vcf/http://example.com/hCard_encoded.htm&filename=old.vcf
Now you shouldn't have to do anything else, all links to the "old.vcf" are redirected to the webservice and will return a new vCard that is dynamially generated from your page.
I think that using 'Redirect' is better than using mod_rewrite (is not enabled on some hosts) --Robert Bachmann
Redirect /path/to/old.vcf http://h2vx.com/vcf/http://example.com/hCard_encoded.htm&filename=old.vcf
Why does my hCard photo not show up in Address Book
Why are photos not working for me when I import my hCard as a vCard into the Apple Address Book?
- The Apple Address Book does not support PHOTO properties that have URL values. This is a known shortcoming/bug in the Apple Address Book implementation. We encourage you to file a bug/feature request with Apple to add support for the vCards with PHOTO properties that have URL values to the Apple Address Book.
Why does hCard use
vcard as the root class name
hCard maps the properties and values of the vCard standard (RFC2426), hence the use of the
vcard class name inside the HTML markup. More background on the reasons behind that decision here: hCard Parsing: Root Class Name.
What are plural hCard properties
Is there a list of all hCard properties which can be plural?
Is there a list of all the properties which can have multiple instances?
- There is the list of hCard properties, and the list of singular hCard properties. Everything that is not singular is plural. This list was presented explicitly (after much analysis of RFC2426) because it was too hard to read RFC2426 and reliably grok which properties were singular vs. plural. See also hcard-cheatsheet.
How do you mark up an organization
How do I create an hCard for an organization or a company?
Mark up hCards for organizations or companies by using both the "fn" and "org" properties for the name of the organization/company. E.g.
<p class="vcard">You can help support <span class="fn org">microformats.org</span> by publishing microformats on your web pages, adding microformats support to your tools, giving constructive feedback on the wiki, and participating in discussions on IRC channel </p>
See also: hCard authoring: Organization hCards.
What does FN stand for
What does FN stand for?
- FN stands for "Formatted Name." From Section 3.1.1 of the RFC:
Type purpose: To specify the formatted text corresponding to the name of the object the vCard represents.
- The reasoning behind this seems to be that, while N gives us a structured name, FN gives us the human-readable, formatted name which is assembled from its structured parts in a culturally dependant way.
How do you mark up a first or last name
I don't see anything for first/last names.
- "first" is a presentational culture-specific (non-l10n, non-18n) description (as is "last").
- Hence vCard and hCard have
family-name), and h-card has
See hCard authoring: Importance of Names for examples.
How do you mark up a middle name or initial
How does one handle middle initials/names in hCard?
- Use the "additional-name" subproperty to markup a middle name. For middle initials, use the
abbrelement to indicate that middle initial is an abbreviation, and use its
titleattribute for the expanded middle name if you have it. See hCard authoring: middle name for examples.
How do you mark up suffixes
How does one handle suffixes, both family related and honorific?
- Use the "honorific-suffix" subproperty to markup both familial suffixes (e.g. Jr., Sr., II, III, etc.) and honorific suffixes (e.g. Ph.D., Esq., M.D., etc.).
<abbr class="honorific-suffix" title="Junior">Jr.</abbr>
How do you mark up city state and zip
How do you mark up the city, state, and zip code of an address?
- The terms city, state, and zip code tend to be a bit US and/or anglo-centric.
- In vCard and hCard, there are the equivalents:
region(state or province)
- and in h-card
How is gender represented
How do you represent gender in hCard?
If you're using microformats2:
- Use h-card and the properties
If you're using hCard:
- There is no GENDER property in vCard3 RFC2426. hCard is following the schema from vCard for interoperability reasons.
It is possible to represent gender implicitly in the honorific-prefix field, e.g. Mr. for male, and Ms. for female:
This approach does have the limitation that "Mr." and "Ms." (or "Miss"/ "Mrs.") may conflict with a higher-ranking, gender-neutral honorific, such as "Dr." or "Rev." for the person, as it is unusual to refer to someone as "Mr. Dr." or "Mrs. Rev." for example. See hcard-issues.
See also the gender research page.
Can a hCard contain extra elements
Is it OK for an hCard node to contain extra elements?
- Yes, parsers will ignore anything they don't understand.
Can a GEO be inferred from an ADR in an hCard
Can I automatically add GEO from an address when transforming an hCard to vCard if it is not present?
- No, an address represents an area of land which is a polygon (or perhaps a space in a building which is a polyhedron), whereas a GEO only represents a single point. They are not equivalent.
X2V does not convert email with name as plain text
X2V doesn't convert my email address correctly, it is in the form href="FirstName LastName <Email@example.com>"
- While that form of email address works for some programs such as outlook, it is not a valid mailto: value (see RFC2368) the FirstName and LastName should be omitted.
One possible valid hCard markup would be:
<span class="vcard"> <span class="fn">Firstname Lastname</span> &lt;<a class="email" href="mailto:Email@example.com">Email@example.com</a>&gt; </span>
This might be displayed as:
What hCard properties are required
What properties are required in an hCard?
- The only required properties are 'fn' (the formatted name) and 'n' (the structured name), but 'n' can under certain circumstances be inferred from the
fnproperty. See the Implied N Optimization for details. See also hcard-cheatsheet.
Does N property require all sub-properties
If I use the 'n' property, do I have to use ALL of the sub-properties?
- No, You can use as many or as few as you need to mark-up the name, but at a minimum you should at least use the 'given-name' and 'family-name' sub-properties if at all possible. If all you have is a nickname/handle/userid, then consider simply marking it up as an 'fn' property and taking advantage of the Implied "nickname" Optimization. See also hcard-cheatsheet.
Do FN and N need to be on same element
Do the 'fn' and 'n' properties have to be on the same element?
- No, you can have two separate elements, for example:
<p class="vcard">My name is <span class="n"> <span class="honorific-prefix">Mr.</span> <span class="given-name">John</span> <span class="additional-name">Q</span> <span class="family-name">Public</span> </span> but you can just call me <span class="fn">Johnny</span> </p>
Can FN be in a backwards order and N still extract the information correctly
Can FN be in a backwards order and N still extract the information correctly?
- Yes, the FN value will take the text string as is, but N will look to the sub-properties and re-order then when converting them to vCard.
<span class="fn n"><span class="family-name">Smith</span>, <span class="given-name">John</span></span>
The FN value would be "Smith, John", but the N value would correctly extract "John" as the given name, and "Smith" as the family name. This is useful for some cultures which reverse the name order.
The same applies to the sub-properties of addresses. You can order post-code before locality, or vice versa depending on cultural norms.
How do you convert a vCard to an hCard
Is there a way to convert a vCard to an hCard?
- There is no canonical conversion from a vCard to an hCard because you can construct an hCard in many different ways while expressing the same semantics. If you would like to recommend a suggested template hCard to use when displaying vCards in a browser, please propose it to the mailing list.
Are descendant elements recognized in a microformat
Are descendants recognized in a microformat property?
- Yes, for example:
<span class="country-name">United States <small>of</small> America</span>
The output would be "United States of America".
Do properties like TEL use all descendants
Do properties like TEL use all descendants? e.g.
<span class="tel"> <span class="type">Home</span>:<span class="value">+1.234.567.8900</span> </span>
Shouldn't that output be "TEL:Home: +1.234.567.8900"?
- No. class="value" is used to denote a sub-element which is used for the value of the property. See Value excerpting for more details.
Can you have multiple value elements
Can you have multiple class="value" elements inside a property and what happens to them?
- Sure, for example:
<span class="tel"><span class="type">Home</span>:<span class="value">+1</span>.<span class="value">234</span>.<span class="value">567</span>.<span class="value">8900</span></span>
would output: "+12345678900".
Can you mix properties and the root class name
Can you put properties on the same element as the root class for a microformat? E.g. span class="vcard fn"?
- No, for several reasons:
- It breaks the simple contextual CSS selector rule for finding and styling property values: .rootname .propertyname which will make it more difficult to write scoped CSS for the properties. For more on why this is important see the microformats FAQ regarding class interactions.
- It will result in more confusion for parsers which may be parsing nested microformats.
In this case in the question, you need two elements:
<span class="vcard fn">
<span class="vcard"><span class="fn">
The only time you can put a root class name (like "vcard") and a property class name on the same element, is when the root class name is basically providing an entire object as the value of the property which then belongs to some other object higher up the tree.
<span class="vevent"> <span class="summary">HTML5 Developer Conference</span>, <time class="dtstart">2013-04-01</time>...<time class="dtend">2013-04-03</time>, at <span class="location vcard"> <span class="fn org">The Palace Hotel</span>, <span class="adr"><span class="locality">San Francisco</span></span> </span> </span>
Can you mix a property and its sub-properties
Can singular sub-properties be mixed with parents?
- No, all sub-properties MUST be on elements inside their parents.
Can you use query strings on email
What happened to the Query String on my email address?
- Query strings are removed from email addresses because they are not valid for importing to vCards
What types of email can you specify
What types of email can you specify? RFC2426 Section 3.3.2 says "A non-standard value can also be specified." Does this refer to a non-standard e-mail address value or type value?
- You can only specify the fixed set of "type" values documented by hCard: adr tel email types, in this case, for the
Are ADR and TEL types case sensitive
Is the list of possible types for an ADR and TEL case sensitive?
- No, enumerated values are case-insensitive, therefore Home, home, HOME, etc. are all equivalent.
How does GEO work with ABBR
What happens to the GEO sub-properties when GEO is used with ABBR?
- The GEO property can be represented two different ways:
<span class="geo"> <span class="latitude">123.45</span> <span class="longitude">67.89</span> </span> <abbr class="geo" title="123.45;67.89">My House</abbr>
When used with an
<abbr> element the latitude and longitude are separated by a semicolon.
How do you mark up a phone extension
How do I mark up a phone extension in hCard? There doesn't seem to be a way to declare a telephone extension in the vCard RFC 2426 spec, the suggested way is currently:
<span class="tel"> <span class="type">work</span>: <span class="value">800 555-1212 x 1234</span> </span>
RFC 3966 suggests that an extension be indicated with ";ext=" for example:
<span class="tel"> <span class="type">work</span>: <span class="value">800 555-1212;ext=1234</span> </span>
although that is more relevant when used as a URI:
<span class="tel"> <span class="type">work</span>: <a class="value" href="tel:+18005551212;ext=1234">800 555-1212;ext=1234</a> </span>
ITU-T Recommendation E.123 1.6 specifies the use of the word "extension" or abbreviation thereof:
Telephone International +22 607 123 4567 ext. 876
The above example may be better as:
<span class="tel"> <span class="type">work</span>: <a class="value" href="tel:+18005551212;ext=1234">800 555-1212 ext. 1234</a> </span>
How do you encode IM accounts
How do I encode my IM account in hCard?
Can you hCard the deceased
How do you make an hCard for the deceased?
- As you normally would, and add the tag "deceased".
- vCards and thus hCard does not have a date-of-death property. You may wish to explore the biographical or genealogy-formats microformats efforts.
- See also vcard-suggestions#Deceased
Any plans for xparams
Are there plans to include x-parameters in future versions of hCard?
- No. The problem is that each of these x-parameters are vendor specific and are not part of the RFC. Secondly, there is no way to be 100% sure that 'x-foobar' is not just a content-specific HTML class name that the publisher is using for CSS styling.
What is a word in implied optimizations
What constitutes a "word" for the purpose of 'implied-n optimization'?
- "N" can be implied from "FN" when the content of "FN" is broken into two "words" separated by whitespace. For this purpose, a "word" is any sequence of non-whitespace characters including but not limited to low- and high-range alphanumerics and punctuation. A "word" can be characterised by the following regular expression:
How do you create non English title attributes
My website is not in English and I want the title attributes (sown as "tooltips", in many browsers) to be in my native language
- Properties such as class="type" require an enumerated list of English words. It is possible to use your native language for the displayed title, but still use the English work for the class="type" without it being shown.
<abbr class="type" title="home"> <span title="[your native word for home here]"> to my home </span> </abbr>
Having an span with a title attribute inside the abbr element will only display the title on the span, where you have the text (your native word for home here).
How do you add categories to an hCard
How do you add categories to an hCard?
- The short answer is, you MUST use class="category" and SHOULD also use rel="tag", e.g. if you wanted to tag someone with the category "microformats", you would put this in their hCard:
<a class="category" rel="tag" href="http://en.wikipedia.org/wiki/microformats">microformats</a>
How are category and rel-tag related
What is the relationship between the CATEGORY property and rel-tag?
- Categories can optionally be represented as tags. The classname 'category' MUST always be used, but rel="tag" can optionally be used (in addition). In the case that a rel-tag tag is used, the tag (as defined by rel-tag) is used for the category. Examples:
<a class="category" rel="tag" href="http://example.com/food">Food</a>
Why not put type for tel or adr into class
Why not put the 'type' value for the 'tel' or 'adr' properties into the class name? E.g.
<span class="fax">(415) 555-1212</span>
- This was actually initially attempted and rejected because it constituted storage of content in the class attribute, which is an anti-design-pattern. The "type" in this case is essentially a "tag" on the phone number, which is human readable content, and thus should be visible, rather than hidden in an invisible class attribute. In addition, polluting the class attribute with content text makes it significantly harder to use it for the intended use, which is to add/refine semantics of existing element names.
How do I markup multiple addresses
How do I markup separate addresses, like for home and work?
- You need two elements with class name "adr" and the appropriate sub-properties. E.g. derived from hCard examples:
<div class="adr"> <span class="type">home</span> address: <div class="street-address">123 Main Street</div> <span class="locality">Any Town</span>, <span class="region">CA</span>, <span class="postal-code">91921-1234</span> </div> <div class="adr"> <span class="type">work</span> address: <div class="street-address">789 Main Street</div> <span class="locality">Any Town</span>, <span class="region">CA</span>, <span class="postal-code">91921-1234</span> </div>
As a result, note that each element with class name "adr" is treated as a separate address with its own subproperties and values.
Why is IMG alt not being picked up
I have my name in an
<img> alt attribute and it is not being picked up by hCard tools. Why not?
You can use an
<img> alt value to specify any text (i.e. not URL) property value by placing the class name directly on the
<img> element itself. Other element alternatives are documented in hCard: Human vs. Machine readable.
Here is an example of doing it WRONG and the corrected RIGHT way. White space added for readability:
<span class="vcard"> <a class="url fn photo" href="http://tantek.com"> <img src="http://tantek.com/icon80.jpg" alt="Tantek Çelik" /> </a> </span>
Note the moving of the class names "fn" and "photo" from the <a> to the <img>
<span class="vcard"> <a class="url" href="http://tantek.com"> <img class="fn photo" src="http://tantek.com/icon80.jpg" alt="Tantek Çelik" /> </a> </span>
Some have suggested having the IMG alt (and other such textual alternatives) always be part of surrounding property values, and while this may initially seem appealing, this was deliberately rejected at the creation of hCard to give publishers more control.
In addition all too often there is "garbage" (or just extra unwanted text) in alt attributes for a variety of publisher reasons, and that extraneous text would pollute otherwise clean property values in numerous existing sites.
Thus only if the publisher explicitly wants the text from the alt attribute do they add the respective class value to get it.
Finally, it is simpler and more predictable for publishers if they know that for images and other such URL related elements (a, object, etc.) that whether they are specifying a URL property (like "email", "photo", "url", etc.) or a text property (like "fn", "nickname", etc.) in either case directly specifying the property on the element is the way to do it.
How do I mark up each ADR with a GEO
I have an hCard with multiple addresses. How do I mark-up each ADR with a GEO?
- Short answer: don't. See also Can a GEO be inferred from an ADR in an hCard.
- Longer: There are two reasons not to mark-up an ADR with a GEO.
- First and most importantly, ADR and GEO don't mean the same thing, therefore you MUST NOT simply mark-up an ADR with a GEO.
- Second, even if you did consider them to be the same information, you shouldn't do so for DRY (Don't Repeat Yourself) reasons. Duplicating information increases the probability inconsistent information due to one copy being updated without the other being updated.
- Details: ADR and GEO represent different semantics, an ADR representing an address of the hCard object (thus hCards may have multiple ADRs), whereas a GEO if present represents the physical location of the hCard object (thus an hCard may have at most a single GEO). In addition, they represent a different data types, i.e. an ADR represents an area of land which is a polygon (or perhaps a space in a building which is a polyhedron), whereas a GEO only represents a single point.
Attempting to duplicate an ADR with a GEO property with nearby/representative coordinates (e.g. as you might derive by using an online mapping service) is also undesirable from the DRY perspective for all the usual duplicates getting out of sync problems.
How do I markup an unstructured location
If I have a location field which is unstructured, how do I mark that up? I might have a user typing "San Francisco" or "San Francisco, CA" or "USA", etc.
- use the "label" property. E.g.
<span class="label">San Francisco, CA</span>
Partial Dates or A Gentleman Never Asks
- I want to mark up someone's date of birth, but don't know which year they were born in.
- I want to mark up someone's date of birth, but only know which year they were born in.
<abbr class="bday" title="2008-09">Sept 2008</abbr>
<abbr class="bday" title="2008">2008</abbr>
Such dates are supported by most microformat parsers. ISO 8601 also allows for dates to be provided without the year (and even without the month):
<abbr class="bday" title="--09-01">1 Sept</abbr>
<abbr class="bday" title="---01">the first of the month</abbr>
These dates are not compatible with W3CDTF or RFC 3339, and have less broad-ranging support in microformat parsers. It should also be noted that the vCard specification requires dates to include years, so even if your microformat parser supports one of these formats, it would probably have to fill in a dummy year when providing a vCard output.
What is AGENT
What is the "agent" property for in hCard?
From Ben Ward on IRC
In business context, the main vcard could be, for example ‘Dana B. Lawyer’, and her vcard contains an AGENT for ‘Joe Secretary’. It is someone who acts as an ‘agent’ of the main person.
Can hCards use variants of properties like Given-Name or country
Can hCards use variants of properties like "Given-Name" or "country"?
No. Only the precise lowercase property names in the hCard spec are valid (see related: case-sensitive).
The following variations that folks have asked about are all invalid and MUST be ignored in hCards:
Given-Name- microformats properties are all lowercase, use
Each of these could perhaps form the basis of a simple hCard parsing error test. See also:
- hCard cheatsheet - hCard properties
- hCard creator (feedback) - create your own hCard.
- hCard authoring - learn how to add hCard markup to your existing contact info.
- hCard examples - example usage of various classes within hCard.
- hCard examples in the wild - an on-going list of websites which use hCards.
- hcard-supporting-user-profiles - sites with user profiles marked up with hCard - a very common example.
- hCard FAQ - if you have any questions about hCard, check here.
- hCard implementations - websites or tools which either generate or parse hCards.
- hCard parsing - normative details of how to parse hCards.
- hCards and pages - semantic distinctions between different hCards on a page, and how to identify each
- hcard-user-interface - techniques and issues surrounding user-interfaces to author, publish, and display hCards.
- hCard profile - the XMDP profile for hCard
- hCard singular properties - an explanation of the list of singular properties in hCard.
- hCard tests - a wiki page with actual embedded hCards to try parsing.
- hCard advocacy - encourage others to use hCard
- hCard "to do" - jobs to do
The hCard specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. These thoughts, issues, and questions are kept in separate pages.
- hCard brainstorming - brainstorms and other explorations relating to hCard.
- hCard feedback - general feedback (as opposed to specific issues).
- hCard issues - specific issues with the specification.
- vCard errata - corrections to the vCard specification, which underlies hCard.
- vCard suggestions - suggested improvements to the vCard specification.