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

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 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.