hCard microformat example

When using the hCard creator, some extra work needs to be done for organizations as well as the way some of the data is formatted. This contact information is taken from http://www.pheasantrun.com/contact.htm.

Install the Firefox add-on Operator to see microformats in action.

Pheasant Run Resort & Spa
info@pheasantrun.com

4051 East Main Street

St. Charles, Illinois, 60174
USA

800-4-PHEASANT

Before:
<div id="" class="vcard">
<a class="url fn n" href="http://www.pheasantrun.com"> <span class="given-name"></span>
<span class="additional-name"></span>
<span class="family-name"></span>
</a>
<div class="org">Pheasant Run Resort & Spa</div>
<a class="email" href="mailto:info@pheasantrun.com">info@pheasantrun.com</a>
<div class="adr">
<div class="street-address">4051 East Main Street </div>
<span class="locality">St. Charles</span>, <span class="region">Illinois</span>, <span class="postal-code">60174</span>
<span class="country-name">USA</span>
</div>
<div class="tel">800-4-PHEASANT</div>
<p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>
</div>


After:

<div id="" class="vcard">
<a class="url fn org" href="http://www.pheasantrun.com">Pheasant Run Resort & Spa</a>
<a class="email" href="mailto:info@pheasantrun.com">info@pheasantrun.com</a>
<div class="adr">
<div class="street-address">4051 East Main Street </div>
<span class="locality">St. Charles</span>,
<span class="region">Illinois</span>,
<span class="postal-code">60174</span>

<span class="country-name">USA</span>

</div>
<abbr class="tel" title="8004743272">800-4-PHEASANT</abbr>
</div>


Changes:

Changed <a class="url fn n" href="http://www.pheasantrun.com"> to <a class="url fn org" href="http://www.pheasantrun.com">, moved Pheasant Run Resort & Spa in between the anchor tags and removed <div class="org"> and </div>. This follows the rules described at http://microformats.org/wiki/hcard#Organization_Contact_Info.

Removed <span class="given-name"></span>, <span class="additional-name"></span>, and <span class="family-name"></span> as we are looking at an organization. This follows the rules described at http://microformats.org/wiki/hcard#Organization_Contact_Info.

Removed extra space after the city (class="locality") and state (class="region") - otherwise you have a space between these and the comma, which looks weird to me. If I used the two character abbreviation for the state, I would have changed <span class="region">Illinois</span> to <abbr class="region" title="Illinois">IL</abbr>.

Changed <div class="tel">800-4-PHEASANT</div> to <abbr class="tel" title="8004743272">800-4-PHEASANT</abbr> to follow the rules discussed at http://microformats.org/wiki/hcard#Property_Notes. Ideally, I would not use letters in the phone number just so this could be avoided.