On Appropriate Use of DIVs, or When Divitis Doesn’t Apply

Divitis refers to the misuse of the DIV element in markup. Too often, sites are converted to tableless by blindly substituting a <div> for each <td> and <tr>. Related afflictions are widespread: one prominent news site wraps each “paragraph” of content in a <div class="p"> element. This pointless mess isn’t an improvement, and tastes as bad as yesterday’s tag soup.

Markup’s job is to generously impart meaning. This principle of “meaningful markup” is core to Web Standards’ ethos. Divitis misses it completely.

But not all DIVs metastasize into divitis.

According to the authoritative W3C spec, DIVs are specifically designed “for adding structure to documents.” Reasonable examples include encapsulating distinct modules (e.g., this is the weather module; this is the module’s footer region) and grouping together modules that live in the same structure (e.g., these modules belong to the secondary group/column). This is the appropriate use of the DIV element.

If one pillar of the Web Standards pantheon says markup should exclusively describe content, the other pillar says presentation instructions belong to CSS exclusively: Markup denotes structure, while CSS renders it. Sometimes structure and page layout feel more like presentation than content, but in truth it is equal parts both. Structure communicated in markup – even when the structure is ultimately expressed visually – is the appropriate use of a DIV.