Find citations on Bloglines or Technorati. View blog reactions
This post's relative popularity: 21%
By category: Front End Engineering, Info Mgmt, References.
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.
Subscribe to this blog.
Ed Eliot December 15th, 2006 - 3:10 pm
This is something I’ve repeatedly wanted to write but have never quite found the right words. Well said Nate.
Nate Koechley December 15th, 2006 - 4:03 pm
Hey Ed,
Thanks, it’s been a long time coming for me too. This is actually part one (I hope); I needed to publish this so I could link to it in a forthcoming post.
Thanks,
Nate
Wayne Smallman December 16th, 2006 - 3:51 am
I got a new client and took charge of their website, taking over from a much bigger design agency.
Most of the web pages were in regular HTML with a smattering of ASP. Nested tables were used extensively for the layout of the pages.
The client was happy for me to go ahead and update these pages to something more standards compliant.
The client knew enough for that knowledge to be a hazard. She pointed out that some of the web pages had been updated, and asked why they might need updating.
Her logic was sound; why, if those web pages had been made ’standards-compliant’, would they need an update? Principally because those pages were a morass of DIV tags used as if they were going out of fashion.
Standards compliant? Yes! Used judiciously? Err, no…
Nate k December 16th, 2006 - 4:18 pm
If you take a ‘content out’ approach to your websites, it helps to place things accordingly. I dont think you can use TOO much, unless you are making divs become something they obviously aren’t (or there is another element that would be better suited). As you said, its when you have divs all over the place that it is no better than a tabled layout. Give meaning to your content the best you can, and go from there. There is no penalty for using divs, just use them properly and wisely.
You can take this to an extreme. As Snook said in his post, once there is more than one item you could mark everything up as a list - but that wouldn’t be the best option.
Adam Platti’s Blog » Blog Archive » Nate Koechley Describes When To Use DIV Elements December 20th, 2006 - 9:02 am
[…] Web standards advocate (and all around cool dude!) Nate Koechley describes the appropriate way to use DIVs in HTML. […]
Tips for Coding Better CSS - Part I | Design Adaptations May 17th, 2007 - 1:20 pm
[…] may have heard of the terms divitis (or classitis), and it’s a poor coding habit that befalls many beginners. Along that vein, […]
Foo Hack » Blueprint CSS Framework vs YUI Grids August 27th, 2007 - 9:01 am
[…] the div tag and class attribute, and it is wrong to say that it’s non-semantic or classitis. Nate Koechley said it better than I […]
Blueprint CSS Framework vs YUI Grids « outaTiME August 28th, 2007 - 9:25 am
[…] the div tag and class attribute, and it is wrong to say that it’s non-semantic or classitis. Nate Koechley said it better than I […]
It’s not Divitis « Graphicmotion’s Weblog November 12th, 2007 - 3:55 pm
[…] Koechley writes eloquently on the appropriate use of DIVs. While he doesn’t come out and say it, I feel like he’s speaking about those who quickly […]