Layout with divs… can you have too many?

Question

What is the best practice for developing a layout? Is better to limit divs? I was looking through the html/css of some popular sites and they all seem to have divs within divs. For instance, a div for the entire page, a div for the topbar, a div within the top bar for the logo, search bar, etc.

Is this a good practice? I suppose it's easier to position all the divs correctly and than place the necessary elements within the divs. It's what I've been doing this far but want to make sure I'm learning the correct approach.

Any help on this is appreciated. Thanks!

Answer 1

There is a name for this sort of "code smell" in HTML: Divitis.

You should expand you knowledge about the semantic meanings for the tags in HTML. You could start by reading this article, but it is more focused on html4.01 and xhtml. There are several new tags in HTML5 and few changes in semantic meaning for the existing HTML4 tags.

Answer 2

A <div> by definition is a meaningless element, so it doesn't matter how many of them you have.

However, you need to have <div>s on your page as long as they make sense, and to not use them if there are elements better suited for the job (semantically).

<div>This is a paragraph of text</div>

should actually be

<p>This is a paragraph of text</p>

And such.

Answer 3

Use <div>s when you need to divide (that's what divs are supposed to be used for) sections of your page from one another. Header/footer from content for instance, or individual posts on a blog.
However, you shouldn't use them when semantically another element would make sense.

If the archive on the previously mentioned blog only showed a two line summary of every post in the archive, an ordered list might make more sense as you are defining a list of items which are in order. <li> elements are block elements as well and can be styled in exactly the same way.

Sometimes, it will make sense to have nested <div> tags, and sometimes you shouldn't.
As a basic test, imagine your page is being parsed by a reader for a visually impaired user. It needs to know what is in each node of the document so it can announce it properly. It doesn't care what your visual CSS needs are, it just wants to parse it into speech as accurately as possible.

Basic points to remember:

• Write your HTML primarily for structure not visuals
• The person viewing your website may not be using your CSS
• The person viewing your website may not be using a conventional web browser
• You can always tweak your structure if the CSS doesn't quite work, providing it remains the same semantically.

Answer 4

The big question is generally whether to use divs or tables. Tables create a lot of headaches, some of which you can't work around. But divs can have their problems as well.

Regardless of what you use, the level of nesting can indeed make the page difficult to understand. So you should favor the fewest levels of nesting needed. At the same time, trying to hard not to nest can also make the HTML difficult to understand.