It's not Divitis
Nate 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 wish to label something with a heavy use of DIVs as 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.”
This aligns well with how I often approach my markup. When I look at marking up a part of a design, I start with the DIV to define the container. Within that, I begin to break it down into its constituent parts. Take a look at the code for this page even, and it’ll become quite evident. Each column within the footer, for example, is a DIV; with each section within being a DIV as well. From there it goes into the H2s, ULs and Ps.
Some might say, “well, you have a list of panels, it should be a list.” Thing is, the moment you have more than one of anything, you could argue you have a list. And I’d rather simply not trade accusations of divitis to replace them with listitis.
By using DIVs, I have dutifully given them structure.
Furthermore, I don't think anybody has been hurt by the overuse of DIVs. As I recollect Dan Cederholm saying in a presentation, "DIVs are like empty calories". When we try to give things too much structure — either unknowingly through tables or knowingly through lists — we can get in the way of the people we try to help.
(As a small aside, this reminds me of when I was developing sites back in 1999. One of the things we used to do at the agency I worked for was to put "Link to Home" and "Link to About Us" on everything. We thought to ourselves that we were being so helpful to those people who use screenreaders by informing them what was a link. However, we got to put our work in front of people with various disabilities and we were surprised to discover that the person who used the screenreader had the capability to bring up all the links on the page. Unfortunately, everything kept saying "Link to..." which became repetitive and annoying.)
We often make assumptions on what we think might be more appropriate for our users but nothing beats actual user testing.
Conversation
Oh hell yes!
I was made self-conscious recently by some article I read one place or another about overuse of divs.
Problem was, I started talking myself out of almost all divs.
I'm trying to find a happy medium.
I've always thought that "divitis" is overrated. Using a few divs to implement multiple background on your layout so that it can still be flexible is a perfectly good balance between semantics and workarounds.
Yeah, I've thought about this too, and I'll use a few extra divs than is really necessary now and then to separate stuff and have styling make more sense (such as being able to refer to only certain elements within a div container, for example, rather than having to define classes to a whole load of elements).
I have no problem with using divs as workarounds, or to achieve certian visual effects. I think divitis starts when they are used in place of a clearly more appropriate tag, such as p or h1.
That said, too many nested divs also make my brain cry on the inside.
I also agree 100%. There's absolutely no danger whatsoever in using a lot of DIV elements. What is a problem, sometimes, though, is people using DIVs where there are more semantically appropriate elements.
So, use the hell out of DIVs -- just do it when there's not a better element already built into HTML. :)
It is like they see the symptoms but forgot to do the diagnosis.
I can't believe that people don't take things like these as obvious. If you just read the specs and think about it it's pretty obvious what a div is supposed to contain. And I must say, a list of columns would be pretty stupid and look horrible without any styling applied. You have to think about what's good semantic markup and also make sure that the content looks decent without any css applied (for PDAs/Cellphone browsers).
Even when using a load of DIVs you can still find a balance by ensuring they all have semantic class names and id's. Then the code is still describing the meaning of it's content.
Anyway, until browsers (IE i'm looking at you) start allowing us to use advanced CSS techniques there are far worse crimes than sprinkling a few extra DIVs through your markup.
Where I'm working now, I contend with one co-worker who uses nothing but DIVs with CSS applied (NOTHING else!). I gave direction to the other two developers who have been producing great semantic markup.
The first thing I told them? When you look at a comp, don't slice anything, don't create a container, don't do ANYTHING per the design. Put the headlines in H tags, put the copy in P(aragraphs), put the nav in ULs. Format those, get them working nicely on their own.
Then use DIVs to tie things together and apply backgrounds where you need to.
I'm glad someone has finally come out and said this.
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".
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).
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>.
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.
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
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.
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.
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.
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".
@Kevin
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.
@Kevin
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.
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!