Jeff Atwood recently wrote about how awkward he found the draft hResume Microformat to implement on Stack Overflow. If you're not familiar with Microformats, the following definition taken directly from the Microformats wiki might help:
Microformats enable the publishing of higher fidelity information on the Web; the fastest and simplest way to provide feeds and APIs for the information in your website.
Put simply, Microformats attempt to add extra semantic constructs to HTML by creating standard data structures for common patterns. Where existing HTML elements aren't expressive enough, Microformats often use the
class attribute to convey the meaning of a piece of data.
Getting back to Jeff's article, one of the criticisms he levelled at Microformats in general was:
We're overloading the class attribute with two meanings. Is "adr" the name of a class that contains styling information, or the name of a data field? Or both? It's impossible to tell. The minute you introduce a microformat into your HTML, the semantics of the class attribute have been permanently altered.
This represents a fundamental misunderstanding of the purpose of the
class attribute; that it's all about providing CSS hooks for styling purposes. The HTML 4.01 specification makes it explicitly clear that the
class attribute has uses beyond CSS styling:
The class attribute … assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
- As a style sheet selector (when an author wishes to assign style information to a set of elements).
- For general purpose processing by user agents.
If you're a web developer writing front-end code, you should keep your content, style and behaviour as separate as possible; it's one of the fundamental principles of progressive enhancement. Use the
id attributes to describe your content, not what it looks like or how it will behave. This will help you to avoid class names like
big-orange-border, which can double the amount of maintenance you need to do when changing how your content is presented.
Pragmatically speaking, you will sometimes end up adding
id hooks specifically for styling or behavioural purposes. However, if you make sure that those classes remain semantic (i.e. describing the content) rather than presentational or behavioural, you will help ensure your layers remain properly separated and easy to maintain.