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

Question

I am working on a website interface and found that I constantly lay out divs for layout purposes. Without using tables for layout, this seems like a natural option for box layouts. However, looking at my completed source code, it is not uncommon to see 3 or 4 layers with the depth of nested divs ...

Is this a problem and should I spend time optimizing my layout to reduce the number of divs I use? Is this bad for search engine indexing (or does it not matter at all)?

Edit: I think my confusion is due to the fact that I do not know how search engines handle divs. What are they looking for in divs (is id important) for divs to somehow describe the title ... or search engines just parse divs)?

Answer 1

I do not think this is empirical evidence that it is bad for search engines, but its definitely bad practice. He even has his own alias - divitis

This is usually due to ignorance of what can be done using CSS. Of course, sometimes with complex layouts you may need to nest divs, and that’s normal, you cannot have absolutely semantic websites all the time. But I believe that no matter how complicated any layout, I should never go to more than 2 or 3 depths.

In fact, the most common attachment you will see is a full-body container to center the layout - this is common, because if, for example, you have three divs in the root and all three are centered due to rounding errors, they can be pixels from each other at different window sizes.

Hope this helps.

Answer 2

I don't think this is bad for search indexing, but too many nested DIVs often arise if you use the CSS field model incorrectly. For example, if you have two img tags side by side in the containing DIV, you probably do not need a div around the img tags - you can set img to display: block, and they will behave exactly like the DIV.

Again, I don’t know what your code looks like, so I can’t say that it smells like anything, really ...

Answer 3

This, of course, is no worse for indexing search engines than using tables, but the divs themselves are not descriptive. You can look at new HTML5 elements such as <section> <header> <footer> and <article> to more accurately describe what the div is for. They are good for ranking in search engines.

Answer 4

It should not bother search engines, and divs - this is what you can call semantically transparent - they themselves do not make sense. That's why they are suitable for defining content blocks.

According to practice, using divs as hooks for styling and layout CSS, but it is very easy to allow you to attach. If you want to try to reduce the nested divs, see if you can replace any of them with semantically meaningful tags. Careful attention to inheritance in the document can also help you cut out some of them, allowing you to apply a special style without additional tags.

All that said: you can’t judge without seeing your layout, but if it’s even a semi-commercial layout, then 3 or 4 layers of the div may not be wonderful or problematic.