Why divs are bad

Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow.

Learn more. Ask Question. Asked 11 years, 1 month ago. Active 8 years, 2 months ago. Viewed 3k times. Improve this question. Add a comment.

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. Mo more or no less. 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.

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. Maybe there's a better and more semantically correct way to do your markup. The number of DOM elements is easy to test, just type in Firebug's console: document. Check other similar pages that have good markup. For example the Yahoo! From the HTML5 spec :. As a general rule, elements whose content model allows any flow content or phrasing content should have at least one child node that is palpable content and that does not have the hidden attribute specified.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

So since divs allow flow content. If it is only a couple of them or a couple of tens of them, it will not make a significant difference and you can use them if they do the job nicely.

But if you have around a hundred or more of them, then you should reconsider your approach, since it will increase the number of DOM elements. A high number of DOM elements can be a symptom that there's something that should be improved with the markup of the page without necessarily removing content.

Are you using nested tables for layout purposes? Maybe there's a better and more semantically correct way to do your markup. The number of DOM elements is easy to test, just type in Firebug's console: document. Check other similar pages that have good markup.