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.

hCalendar microformat example

Created at http://microformats.org/code/hcalendar/creator

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

Without specific times:

September 9th : 13th, 2008
2008 NAGW National Conference all day at Pheasant Run Resort and Spa, St. Charles, IL

The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.

Code for the above:
<div id="hcalendar-2008-NAGW-National-Conference-all-day" class="vevent">
<a href="http://nagw.org/index.php/annual-conference" class="url">
<abbr title="2008-09-09" class="dtstart">September 9th</abbr> : <abbr title="2008-09-13" class="dtend">13th, 2008</abbr>
<span class="summary">2008 NAGW National Conference all day</span> at <span class="location">Pheasant Run Resort and Spa, St. Charles, IL</span></a>
<div class="description">The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.</div>
</div>

September 12th was chosen as the end date, but September 13th shows up as the end date here. When exported to Outlook, the end date is September 12th. This can be confusing, but we could change the text to say the 12th as long as we leave the title attributes alone.

Let's see what happens when we put in a start time of 8:00 a.m. on September 9th and an end time of 12:00 p.m. on September:

September 9th 8am : 12th 12pm, 2008 :
2008 NAGW National Conference all day at Pheasant Run Resort and Spa, St. Charles, IL

The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.

Code for the above:
<div id="hcalendar-2008-NAGW-National-Conference-all-day" class="vevent">
<a href="http://nagw.org/index.php/annual-conference" class="url">
<abbr title="2008-09-09T08:00-06:0000" class="dtstart">September 9th 8am</abbr> : <abbr title="2008-09-12T12:00-06:00" class="dtend">12th 12pm, 2008</abbr> :
<span class="summary">2008 NAGW National Conference all day</span> at <span class="location">Pheasant Run Resort and Spa, St. Charles, IL</span></a>
<div class="description">The NAGW National Conference is the premier conference for local and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for three days of education, training and networking in a relaxed professional environment.</div>
</div>

The title attributes here cause an accessibility issue, though, as the Jaws screen reader will read these as numbers and not as time. The <a href="http://www.webstandards.org/2007/04/27/haccessibility/">accessibility task force</a> from <a href="http://www.webstandards.org">webstandards.org</a> recommends using the span tag instead of abbr to reduce the occurrence of this issue.

If you ever need to use an afternoon or evening time, remember to express the time in 24-hour/military time (Example: 1:00 p.m. would be 13:00.).

Google improves Flash indexing

The Official Google Webmaster Central blog goes into details about what improvements there are to Flash indexing.