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:

<!-- outer table -->
<table bgcolor=”#000000” border=”0” cellspacing=”0” cellpadding=”0”>
<tbody>
<tr>
<td>
<!-- inner table -->
<table border=”0” cellspacing=”1” cellpadding=”3”>
<tbody>
<tr>
<td bgcolor=”#DDDDDD”><font face=”Verdana, Geneva, Helvetica, sans-serif”
size=”2”><a href=”home.html”>Home</a></font></td>
<td bgcolor=”#DDDDDD”><font face=”Verdana, Geneva, Helvetica, sans-serif”
size=”2”><a href=”about.html”>About Us</a></font></td>
<td bgcolor=”#DDDDDD”><font face=”Verdana, Geneva, Helvetica, sans-serif”
size=”2”><a href=”products.html”>Our Products</a></font></td>
</tr>
</tbody>
</table>
<!-- END inner table -->
</td>
</tr>
</tbody>
</table>
<!-- END outer table -->
This version isn’t much better:
<!-- outer table -->
<table class=”bg-black” border=”0” cellspacing=”0” cellpadding=”0”>
<tbody>
<tr>
<td>
<!-- inner table -->
<table border=”0” cellspacing=”1” cellpadding=”3”>
<tbody>
<tr>
<td class=”bg-gray”><a href=”home.html” class=”innerlink”>Home</a></td>
<td class=”bg-gray”><a href=”about.html” class=”innerlink”>About Us</a></td>
<td class=”bg-gray”><a href=”products.html” class=”innerlink”>Our Products</a></td>
</tr>
</tbody>
</table>
<!-- END inner table -->
</td>
</tr>
</tbody>
</table>
<!-- END outer table -->

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:

<div id=”outer-table”>
<div id=”inner-table”>
<div class=”innerlink”><span class=”link”><a href=”home.html”
class=”innerlink”>Home</a></span></div>
<div class=”innerlink”><span class=”link”><a href=”about.html”
class=”innerlink”>About Us</a></span></div>
<div class=”innerlink”><span class=”link”><a href=”products.html”
class=”innerlink”>Our Products</a></span></div>
</div>
</div>

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.