Learn to Write Professional CSS

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

The first two examples in the previous section are similar to many others commonly found online. The second of the two comes from a Web author who thinks he is doing the right thing by pulling presentation information into CSS classes.

It is a good start, but it does not convey structure or meaning. It also continues to rely on the presentation aspects of the <p> tag without marking any text as a paragraph.

The third example is superior in many ways:

• The content is easier to read in the code.
• The article is surrounded by a <div> element with a class of article, and the credit section is surrounded by a class of credit. This breaks the portions of the code up from others and allows the usage of CSS, which does not need extra classes added to the markup. A single class per section is easier to remember, use, and document than several.
• Presentation elements such as the bold <b> tag have been dropped in favor of meaningful code. Additionally, usage of <em> for emphasis as opposed to italics is preferred.