Overuse of nested DIVs. Bad practice or bad for search engine indexing?

Question

I am working on a website frontend and found myself constantly nesting divs for layout purposes. Without using tables for layout it seems like the natural option to layout boxes within boxes. However looking at my completed source code its not unusual to see 3 or 4 layers deep of nested divs...

Is this a problem and should I bother spending time trying to optimize my layout to reduce the amount of divs I am using? Is it bad for search engine indexing (or does it not make any difference at all)?

Edit: I think my confusion arises from the fact that I am ignorant as to how search engines handle divs. What do they look for in divs (are the id's important..should the divs somehow be descriptive of the title...or do the search engines simply parse out the divs)?

Answer 1

It is certainly no worse for search engine indexing than using tables, however divs themselves are not descriptive. You may want to look at the new HTML5 elements such as and to more accurately describe what the div is for. These are good for search engine rankings.

Answer 2

I don't think it's bad for search indexing, but too many nested DIVs often crops up if you aren't using the CSS box model correctly. For example, if you have two img tags side by side in a containing DIV, you probably don't need div's around the img tags -- you can set the img's to display:block, and they'll behave just like a DIV.

Then again, I don't know what your code really looks like, so I can't say that it smells like anything, really...

Answer 3

I don't think theres any empirical evidence that it is bad for search engines, but its definitively bad practice. It even has its own nickname -> divitis

Generally it arises from ignorance of what one can accomplish through CSS. Of course sometimes with complicated layouts you may need to nest divs and thats ok, you can't have perfectly semantical websites all the time. But I find that no matter how complicated any layout I do is, I've never had to go more than 2 or 3 deep.

Actually the most common nesting you'll see is the whole body container in order to center the layout - this is common because if, for example, you have 3 divs in the root and all three are centered, because of rounding errors they might be a pixel off each other on different window sizes.

Hope this helps.

Answer 4

It shouldn't bother search engines, and divs are what you might call semantically transparent - they have no meaning in and of themselves. That's why they're suited to defining blocks of content.

It's accepted practice to use divs as hooks for CSS styling and layout, but it's very easy to let the nesting run away from you. If you want to try to reduce the nested divs, see if any of them can be replaced by semantically meaningful tags. Careful attention to inheritance in the document might also help you cut some out by letting you apply specific styling without extra tags.

All that said: it can't be judged without seeing your markup, but if it's even a semi-complex layout then 3 or 4 layers of div might not be remarkable or problematic.