We here at Mindfly take our hCards very seriously. Seriously in a sense that if there is contact information on a website, it'd better be put in a hCard.. (If you don't know anything about hCards or microformats, Janae wrote a post about them awhile back entitled Using Microformats to Find Carmen Sandiego.) Being relatively new to hcards myself, I've made some rookie mistakes that caused me endless frustration to something that seemed so straight forward. So here are my top three mistakes in no particular order:
1. Everything for the hCard has to be contained in the same <span> or <div> or <address> or whatever you decide to wrap it in. You cannot, for example, have this in your header:
<div class="vcard">
<span class="fn">Company Name</span>
</div>
and this in your footer:
<div class="vcard">
<span class="adr">
<span class="street-address">215 W. Holly Street</span>
<span class="locality">Bellingham</span>, <span class="region">WA</span> <span class="postal-code">98225</span>
</span>
</div>
They must all be bundled together in the same <div class="vcard"></div>
Maybe that seems obvious, but it wasn't to me. I thought it just all had to be on the same page with a class="vcard'.
2. There must be an "fn" or "fn org" (meaning a name or company name) included in your <div class="vcard"></div> for the hCard to even be recognized. Again, seems rather obvious, but I did not think of it because I did not want the organization name to show up in the address block - one of the downfalls (I think) to how hCards have to be formatted.
3. The class="tel" is particularly persnickety. To get your telephone numbers to pull correctly each has to be wrapped in their own <span class="tel"></span> and not lumped in together. For example if you had a phone number and a fax you would write:
<span class="tel">
<span class="type">Work</span>
<span class="value">360.647.7470</span>
</span>
<span class="tel">
<span class="type">Fax</span>
<span class="value">360.555.5555</span>
</span>
What I find particularly annoying about the "tel" format, is the types have to be home/work/pre/fax/cell/pager. As a designer, I most likely will not want the word "work" to ever preceed a phone number. I usually prefer "phone" or "tel" or nothing at all, which leads to me doubling up on class (such as class="type work") so I can set it to {display: none} in my CSS. That's not ideally how I would like to handle that, but there it is.
*As a side note: I've yet to have been able to figure out how to get the fax number to pull as "Business Fax" in Outlook rather than "Other Fax." So if anyone knows that one let me know!
