Learn to Write Professional CSS

Pulling Information from a Page with Microformats Using the hCard example above and an extension add-on for the Mozilla Firefox browser, it is possible to demonstrate a simple example of how powerful microformats can be. Michael Kaply at IBM has created an excellent extension called Operator, which you can download and install from the Mozilla Add-ons site: https://addons.mozilla.org/en-US/firefox/addon/4106
Once the extension is installed, users have either a new toolbar or a status bar icon that becomes active when visiting a Web page with data embedded in a microformat. The toolbar allows a multitude of ways to interact with a variety of microformats.

Since this example is an hCard, the Operator extension allows the user to export the embedded contact information to a vCard file, which can be imported into any software package that accepts that format, such as Microsoft Outlook. It is an incredibly easy and powerful way to add information to an address book directly from a Web page, particularly in a business environment.

The specifications being created at microformats.org are not only an excellent source of inspiration for class names, but they may pave the way to a more semantic Web. By marking up content of certain types in POSH and standardized ways, the content is given meaning. Tools embedded in Web browsers today (there are extensions for Mozilla Firefox already) can call out that information and enable users to do useful things with it, such as adding appointments to their calendar software or adding users’ contact information to their address books.

Future tools may do even more. Search aggregators that mine for data such as reviews of products, resumes, or even syndication of articles are a distinct possibility.

There are a number of microformats already standardized, and more in development every day. Some of these include:

• hCalendar format for date and time (appointment) type information
• hCard format for contact information
• XOXO format for outlines
• hAtom format for syndication of blog articles
• hResume format for resumés
• hReview format for reviews

What about the following:

<span class=bigHeader>My Online Article Title</span><p>
<span class=dateentry>May, 2007</span><p>
<span class=regulartext>Hey everybody, welcome to my article. Today
we’re going to be talking about:<p>
<span class=list>
Web standards-based markup<br>
Cascading Style Sheets<br>
XHTML</span><br><br>
Let’s get started!
<table class=”box”>
<tr><td>
<span class=”italics”>About the author:</span><br><br>
<a href=”http://navigationarts.com” class=authorHeader>Rob Cherny</a><br>
Lead Developer<br>
NavigationArts, LLC<br>
7901 Jones Branch Road<br>
McLean, VA, 22102 United States of America<br>
703.584.8920
</td></tr>
</table>

This code uses CSS and pulls content and presentation information apart. So what’s wrong with it and the first example? For starters, in both these examples, the code as it relates to the content is meaningless.

Even more so:

• The first example uses the <font>, <b>, and <i> presentation elements, all of
  which are deprecated.
• The second example features usage of <span> elements around all the content items, which does not convey that the information is a header, paragraph text, or list.
• With the <span> elements, the usage of the bigHeader class implies presentation information in its name.
• The <p> tags are being used at the end of each line and do not explain what a paragraph is in the document so much as demonstrate what its presentation attributes might do: create a double line break. The list class on the last <span> is just odd when there are perfectly good XHTML elements for lists: <ol> and <ul>.