Mark makes a good point too (above). What annoys me is when people fall into the common misconception of thinking that the 'art' of web standards is nothing more than "designing with DIVs".

Nate K said on December 16, 2006

Sometimes I feel like I am always echoing Jeff C. ha.

He hit the nail on the head (As did you). There is no reason to NOT use divs - unless there is a better element to represent the structure. I think you have alot of freedom with divs, and they can help structure the presentation aspect (especially with columns or positioning).

I think when you use them all over the place without thinking 'content out' - then you are no better than using tables for the layout. While I like to keep my code tidy, sometimes you might need a few extra elements (as CSS3 probably isn't so quick around the corner as we would like).

Jesse Skinner said on December 16, 2006

I prefer to use lists over divs when possible not for structural reasons (show me an HTML parser that actually cares about the semantics of lists), but because they make the code easier to read, work with and style by using different elements instead of just IDs and class names.

It's a lot easier to understand </li></ul></li></ol> than </div></div></div></div>.

Kilian Valkhof said on December 17, 2006

I think the main problem lies with people trying to use divs when it's really not needed. Like div's around menu lists (ul is a container, too), or, in it's more extreme forms, divs for everything (like Mark pointed out).

I personally try to use the least amount of divs (and code in general) for pages. True, I add extra divs if they're needed for presentation, and a couple of extra never hurt anyone, but it's (arguably) not the way you're supposed to use them.

Johan said on December 17, 2006

Divs are to group elements that make out the basic parts of your page layout: eg header, footer, content, navigation which is not only handy to apply CSS more logically, meaning using the power of the cascade. But at times you need to spread and seperate style information on a wrapper div and a inner div to control the lay-out. Why? To avoid CSS bugs from occuring in eg IE WIN. A good example is seperate paddings and margins when floating a group of elements wrapped in a div.

Justified situations to use just one element contained in a div.

You might use a DIv to add a positioned background, purely a decorative image.

Or with scripting, eg javascript you add a div to control the fontsize with scripting, or you add a div to display the total amount of time a script needed to load.

arguable, you could wrap a DIv around a h1 element and declare that the header but
then you would better do <h1 id="header ... Logical since id is for a unique element

Andy Kant said on December 18, 2006

I was guilty of this when I first started making web standards-based and CSS-only designs. DIV's require less knowledge to style because you don't have issues like default margin and padding. Maybe that's why some sites end up that way, the designers are just new to the technique.

Derek Allard said on December 18, 2006

Good point(s) Jonathan. Either you've raised all the points, or these (excellent) comments have, but I did also want to add that semantic markup and good structural HTML is only so good. The skill that I see missing so often from otherwise excellent webmasters is an understanding of CSS selectors.

If nested divs are being used to achieve a specific semantic effect that's one thing, but if they are being used as a crutch that's another. I've seen a lot of frivolous "#menu #topmenulist" used in a CSS instead of "#menu ul" simply because the author didn't properly understand the cascade.

Adrian Neilson Hall said on December 19, 2006

There's a point that has been touched upon in some of the responses, but not clearly expressed. On the one hand most of us strive to write semantic markup. On the other hand, we insert divs with a purely presentational purpose - "wrapper', "container", "col(umn)" etc. Isn't this a contradiction? An element can't be "semantic" if it's only purpose is to achieve a visual effect or layout, can it? I think we should be honest about this sort of markup and acknowledge that it is only semantic to a point - that it's the best we can do, without some sort of scripting solution. And that's another point that could be made - it is possible to write strictly semantic xhtml and at the same time achieve the sorts of layouts we're after - columns, vertical alignment etc. One solution is to use javascript to write those presentational divs on the fly.

stephen said on December 20, 2006

Thanks for this post Jonathan, (and thanks for the ability to scroll up and down the post and comments whilst still typing my comments!) - it certainly 'validates' my methodology of using DIV's to define sections.

Like some of the commentors, I sometimes wonder if I am over using them - therefore your post succinctly gave me one statement to beat all others: "By using DIV's, I have dutifully given [sic ]the site structure".

Nico said on August 28, 2007


Yeah, that's true if it's completely useless, but if you have tons of div's for all kinds of background image layering effects, then it hurts no one. Access strokes skip it anyways, and visual agents don't see anything but the beauty.

Nico said on August 28, 2007


Yeah, that's true if it's completely useless, but if you have tons of div's for all kinds of background image layering effects, then it hurts no one. Access strokes skip it anyways, and visual agents don't see anything but the beauty.

Geoff Kendall said on February 19, 2011

I agree that divitis is an over-rated failing, if indeed it is one at all. There is often less code in an extra div than there is in a workaround, and a clearly IDed div is certainly more comprehensible to others. It's true that using a div in place of a heading is to be avoided, but so many IE bugs and quirks just go away as soon as you use a straightforward div; I had a table adjacent to an inline-block styled heading and spent far too long googling for a reason/explanation/workaround for the margin collapse (or whatever it actually was) that left the two adjacent to each other in IE6 and IE7.Once I decided to admit my 'divitis', as I'm told to consider it, the problem was a thirty second fix. Put the table in a div, padded the div, removed the margins, voila; less code, and it works across all browsers. I'll bet it renders faster too. Divitis? Don't be divophobic!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.