Rheal Poirier

Graphic, Web, Email and Variable Data Designer

My CSSOff Microformats


In my previous post, divide and conquer I created the basic HTML page with all the necessary content for the CSSOff contest. In this post I’m going to discuss microformats. To figure out what microformats are it might be best to quote directly from the Microformats.org website.

Microformats are simple ways to add information to a web page using mostly the class attribute (although sometimes the idtitlerel or rev attributes too). The class names are semantically rich and describe the data they encapsulate.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Microformats are a bunch of class names that, when put in the right combination, let machines and people better understand  information like contact information, events, reviews and relationships. It’s much easier to identify, use, search,  and categorize the information on websites that have microformats. Almost every blog, discussion board and many online stores use microformats. Google uses them  in their search algorithms and for many of their applications, and not too long ago facebook added microformats to their site.

There are different types of information that microformats help to handle.  hCard allows the identification of address and contact information. hCalendar allows you to identify dates and times. hReview allows ratings, summaries, descriptions and just about anything related to reviewing any product or service. XFN allows people to define relationships and friendships to all your linked friends (think of facebook here).

For the purposes of the CSSOff contest, hCard will be used to mark up the addresses.

In the CSSOff example the organization name and their two addresses are located in the footer of the design.  Microformats  (more specifically hCard) will be used to represent the The Knucklelodeon Network’s two locations: Sacrameno and Jacksonville. hCard follows the vCard format which is used in most address book applications and web based email clients like gmail.

Adding a class of  vcard  to the footer of the CSSOff site informs the browser  and machines  of contact information <footer class=”vcard”>.  The next set of classes are added to the “The Knucklelodeon Network” header tag. <h3 class=”fn org”>The Knucklelodeon Network</h3>. The class name fn stands for Formatted Name. This is a required class in the hcard format. It can contain the name of an individual or, in our case, the name of an organization.  The class name org  in our h3 tag identifies “The Knucklelodeon Network” as our organization’s name.

With the formatted name identified it’s time to add the address. Below are our completed addresses.

    <h3>Visit Our Studios</h3>
    <p class="adr work"><span class="street-address">11 Slime Time Way</span><br/>
        <span class="locality">Sacrameno</span>, <span class="region">CA</span> <span class="postal-code">94203</span><abbr class="country-name" title="United States of America"></abbr></p>
    <p class="adr work"><span class="street-address">329 Gunk Road</span><br/>
        <span class="locality">Jacksonville</span>, <span class="region">FL</span> <span class="postal-code">32099</span><abbr class="country-name" title="United States of America"></abbr></p>

Under the “Visit Our Studios” section the classes adr and work identify the paragraph of text as a work address <p class=”adr work”>. The span tags are mostly used in this example as there is no semantically specific HTML tag for address information. A tag with the class name of street-address is used to identify “11 Slime Time Way” as the street address. The class locality is used for the city (Sacrameno). region is used for the state or province (CA) and the class name postal-code is, well, the postal code or zip code for the address.

No address would be complete without the country. Humans can quickly deduce that the country for this particular address is the USA. Machines, on the other hand, need a bit more information. This is where the HTML abbreviation tag is very helpful. The abbr tag gives the ability to make human readable text machine readable by adding that text to the title attribute in the abbr tag.  In the CSSOff site the abbr tag contains the country-name class with a title of  United States of America. The Abbreviation tag can be used for missing information as well as properly formatting text for machines. If  the Knuckleodeon Network’s Sacrameno address was “11 Slime Time Way Sacrameno, CA 94203 USA” the word USA could be enclosed in an abbreviation tag with the country’s proper name in the title attribute <abbr title=”United States of America”>USA</abbr>.The contents of the title attribute (United States of America) will be added to the vCard and not the text USA. This is extremely helpful when dealing with dates, times, information needed for machines and any word that’s abbreviated. Humans get to read the human formatted text and the machines get to read the machine formatted text. Everyone now has the ability to read the Knuckleodeon Network’s addresses.

Since the Jacksonville address contains the same type of information and is also a work address it will follow the exact same formatting as the Sacrameno address.

How do I know I’ve done it right?

If you read the blog post entitled Let’s get this party started! at one point I discussed adding the Operator Firefox extension to the browser to view microformat data. With the address information properly formatted it’s time to view what we have so far.

If  the Operator extension is installed  the Contacts menu should display a contact.

Microformats Contacts

Clicking Contact’s name allows the ability to export the CSSOff formatted text to your address book, view your address on a map or export it to Yahoo! Contacts.

Contacts pulldown tab

Here’s an example of the contact information is Apple’s Address Book application (if you chose Export Contact from the menu)

Address Book Contact

There are many other  microformat properties  available in hCard so please read the documentation and  view examples on the Microformats website.

Leave a Reply

Required fields are marked *.