For a while I was battling to get hCards working, meaning not only styled correctly, but that they could be downloaded and translated into a vCard in the process. The usual problem would be an “no hCard” error. Once I finally understood the reasoning behind that, I still ran across the problem of an incomplete address line, either it would see my street address or the city but never all. Thus, I do admit, I am quite happy to have finally understood the do’s and the do-not’s.

  • html5 works just fine
  • you do not need additional profile info in your <head> tag
  • you do not need additional info in your <html> tag, referencing xml
  • you can use utf-8, this works just fine
  • the hCard/vCard download link has to point to a file, not a directory. This means if your hCard is in index.html, it does not suffice to put only into the download link. This is the main reason behind ‘no hCard’ errors. This also means that if you are having the address in an include, you need to point to the include file, not the rendered output file, i.e. not but
  • the download link will look something like this: <a class=”download” type=”text/directory” href=””>download vCard </a> whereas points to the service which enables and converts the hCards to vCards.
  • whenever you have a line consisting of several spans, making up the whole line, such as first middle last name, you have to ad the fn to the class to make it clear that this is a machine generated string.
  • watch out for proper wrapping of tags and remember that you can not have inline tags such as span or em encompassing block level tags such as p or an h1 tag. Doing so will create for example the problem of an incomplete output of the address

The following is an example of a working hCard:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Address Card</title>
<address id="hcard" class="vcard">
<p class="fn n">
<span class="given-name">First</span>
<span class="additional-name">M</span>.
<span class="family-name">Last</span>
<p class="fn adr">
<span class="street-address">123 My Street</span><br />
<span class="locality">Hometown</span>,
<span class="region">XX</span>
<span class="postal-code">12345</span>
<p>Phone: <span class="tel">000-000-0000</span></p>
<p class="tel"><span class="type">Fax: </span><span class="value">000-000-0000</span> </p>
<p><a class="email" href=""></a></p>
<p><a class="fn url" href="www.">My Cool Domain</a></p>