Avoid Divitis and Classitis

When abandoning tables for more lightweight markup, itâ€™s not uncommon for beginning developers to rely heavily on class attributes to replace their beloved font elements. So, we might have dealt with a navigation bar table that looked like this:

This is known as classitis, a term coined by designer Jeffrey Zeldman (www.zeldman.com/) to describe markup bloat from overuse of the class attribute. The monkey on our back has been exchanged for another. Rather than spelling out our presentational goals explicitly in the markup, this example uses the class attribute to achieve the same means. All thatâ€™s been changed is that the values of the bgcolor attributes and font elements have been moved to an external style sheetâ€”a fine start, but the markup is still unnecessarily heavy.

Even worse, itâ€™s far too easy to succumb to divitis, taking otherwise sensible markup and turning it into soup loaded with div elements:

If that made any sense to you, perhaps youâ€™d be kind enough to call us up and explain it to us. Thereâ€™s no obvious attempt here to write well-structured markup. While div and span are excellent markup tools, an over-reliance upon them can lead to code bloat and hard-to-read markup. And not just hard for you to read, but your users as well. Remember our text-only screenshot from before (refer to Figure 2-3)? If someone has style sheets turned off, using generic markup will make it difficult for those in a nongraphical environment to understand the context of your content.