Hi,
I have seen some advice in books and online articles about not abusing DIVs and every time I start a new project and start using divs for my page structure I start wondering if it’s already too many divs. The thing is that I don’t completely understand why is this bad practice.
1- Why using too many divs is bad practice?
2- What’s the down side if using too many divs?
3- How do you know if you already used too many divs?
4- Any rule of thumb?
I know HTML 5 may change this with the new structure tags (head, section, footer etc) but for right now I would like to do this right.
Thanks
In my experience the less divs you use the easier it will be to apply styles without conflicts in CSS or layout. Also I believe it can slow down the rendering of the site in the browser.
I try to use divs where they mark a logical (in regards to the content they contain) separation, therefore all the elements in a header may be in a header div, the main content is normally in a content div and a side bar in another. Then if you have elements such as a block of information that would be in a div, eg on a property website if you had a list of properties for sale each property in the list would have an image, a title and a description which I would contain in a div with a class like ‘prop-listing’. Within these I always try and use standard markup - h1, h2, p, etc.
Sometimes to achieve a desired effect/layout you may find you have to add another div, but only as a last resort.
well the key word there is “too” … “too” of anything is by definition bad.
"Too tall, too short, too loose or too taut. There’ll be a bind for every kind. "
so really what one needs to be thinking is what defines “too” ( this would be question 3, I suppose)
- Bloat, more complex code, the possibility that it will affect future changes in the style sheet. Also , it is possible that the extra div are simply semantically incorrect usage, <div> instead of <p> when the content text IS a paragraph. This is not to say that there are not times when you should use a DIV INSTEAD of a P around text., just that you have to consider the content.
- OK, see this is what i mean about absolutism. its not a game where you are counting divs and 34 is too few but 36 is too many. You need to consider your content and it’s semantics once you have that marked up then use as few divs as you can to achieve the layout, effects and support you need.
for example, if you have two paragraphs of content text, and you want them side by side, as if there were columns… you dont need any divs… if that’s ALL the content you have , as you can simply do p{float:left;} but if you wanted an indeterminate amount of paragraphs into two columns you will need at least one div, possibly 3.
which leads to 4)
think of your content first, write it up as semantically accurate as possible. dont skimp… dont try to guess about layout or design … just use semantics and proper tags to represent that. by the time you are done with that stem you should have few if any divs. Remembering that most of your elements will already be block level to begin with, add divs as NECESSARY to hook in your CSS and create your layout and design. if this may mean adding 1, or 100… depending on how clever you are with CSS, but at that point it’s not divitis, but merely a indicative of how experienced you have become with CSS or even the level of browser support you wish to give.
hope that helps …
Thank you all for your comments. I’m a little confused because I have seen a lot of big websites using a lot of divs (nested divs) and I’m assuming that they were done by people who know what they are doing (I hope).
Nice portfolio dresden_phoenix (neighbor) and thank you for your comments.
The most common causes of ‘divitis’ are (1) trying to recreate a table-based layout by writing a <div> for each and every table cell, when it could actually be written much more efficiently, and (2) unnecessary grouping of blocks together, particularly opening three <div>s in a row, and then closing the same three in a row … most of the time, the styles from all three could all be applied to a single <div>, (3) wrapping a <div> round elements that are quite happy to stand on their own, such as a navigation menu <ul>.
The reason that ‘divitis’ is bad is because it makes your code messy. That might sound trivial, but it has two consequences - first, it makes it really difficult to de-bug and edit, because you’ve got so many nested layers it’s hard to pin down exactly where changes need to be made - second, it adds unnecessary bytes to the download and extra complexity to the page, which can slow down rendering in browsers.
I see, does that affect SEO? Thanks for your comments.
You assume too much 
You often find programs generated by CMSs (such as wordpress) are just a mass of nested divs and almost impossible to debug. I suppose that’s the price you pay for using off the shelf systems that try to cater for every eventuality.
It’s the same with grid systems and you have a mass of code just in case you might want something later.
Streamline code is always more efficient in every way and as clearly explained in the posts above you just use the right elements at the right time. You just use what’s needed. Mo more or no less.
A prime example of redundant code is this:
<div id="nav">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
In 99% of cases the div is redundant and the ul could have been the main container for that section and styled accordingly.
This is also bad:
<div>My page Heading</div>
<div>My content goes here</div>
<div>more content goes here</div>
It should be:
<h1>My page Heading</h1>
<p>My content goes here</p>
<p>more content goes here</p>
Although both are valid only the latter is semantically correct and instantly recognisable.
Divs are basically divisions of content and you use them when you need to group elements together or when there is no other suitable html element available for the task in hand. It’s still good to divide the page into sections although sometimes you could get away with out it doing so you should just do it where appropriate (e.g. header, footer, content etc).
Trying to debug a page that is all divs is a nightmare and is almost as bad as trying to debug nested tables as you just can’t tell where you are or where the tag belongs. In a well structured page you can just look at it and know what its all about just by reading the html.
I have LOST several clients for attempting to offer good code. :: ouch::
CMSs and WYSIWYG editors are partly to blame for that, but more often than not is teh only way to please a client. remember point #4? well what if the client request is:
" We want a site, but we dont have any content, or even d anything thought out about TYPES of info… also, we are on a budget and we dont want to have to keep running back here each time we think of a new “section”, we also dont want to be limited as to the number of topics or their order or importance on the page… we want this to be a versatile template"
So, a lot of ambiguity is built into that request. Ambiguity is the opposite of streamlining. 
Point being , that looking at the source code of a site is not ALWAYS a good way to learn.
Recently I was doing JUST THAT and I came across that… and posted it on a thread here ( see #43)
a botched attempt to eliminate divs… (again what you should be striving for is PROPER CODE)
Ironically, the following post (#44) reinforces what i was saying about “client pressure”
Realistically it won’t really make much of a difference as most of the tags just get ignored. That said the less extra tags you put in, the easier you make it for search engines to find your actual content.
Also writing headings using the correct markup (as suggested above) does make a difference (as long as you have your keywords in your titles of course).
Thank you all for the good info!