Layout with divs ... can you have too much?

Question

What is the best practice for developing a layout? Better to limit divs? I was browsing the html / css of some popular sites and all of them have divs inside the div. For example, a div for the entire page, a div for the top panel, a div in the top panel for the logo, search bar, etc.

Is this a good practice? I believe it is easier to arrange all the divs correctly and put the necessary elements in the div. This is what I have done so far, but I want to make sure that I am learning the right approach.

Any help on this is appreciated. Thanks!

Answer 1

Use a <div> when you need to divide (what a div should be used for) sections of your page apart. Header of content, for example, or individual blog posts.
However, you should not use them if another element semantically makes sense.

If the archive in the blog mentioned earlier showed only two lines in each message in the archive, an ordered list may make more sense, because you define a list of elements that are in order. <li> elements are also block elements and can be written in exactly the same way.

Sometimes, it makes sense to have nested <div> tags, and sometimes it’s not necessary.
As a basic test, imagine that your page is being analyzed by a reader for a visually impaired user. He needs to know what is in each node document so that it can declare it correctly. No matter what you need for visual CSS, it just wants to parse it as accurately as possible in speech.

Key points to remember:

• Write your HTML primarily for a non-visual structure.
• The person viewing your site may not use your CSS
• A person browsing your site may not use a normal web browser.
• You can always customize your structure if CSS is not working as it remains the same semantically.

Answer 2

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

However, you need to have a <div> on your page, if that makes sense, and not use them if there are elements more suitable for the job (semantically).

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

it should be

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

And such.

Answer 3

HTML has the name for such a "code smell": Divitis .

You need to expand your knowledge of the semantic meaning of tags in HTML. You can start by reading this article , but it focuses more on html4.01 and xhtml. HTML5 has several new tags and several semantic changes to existing HTML4 tags.

Answer 4

The big question, as a rule, is the use of divs or tables. Tables create a lot of headaches, some of which you cannot get around. But divs can also have their problems.

No matter what you use, the level of nesting can really make it harder to understand the page. Therefore, you must maintain minimal levels of nesting. At the same time, trying hard to get out of the socket can also make HTML difficult to understand.