Why do web developers use too much div?

Question

For example:

<div class="------">
<div class="------">
<div class="------">
<div class="------">
<div class="------">
<h1>Contact Us</h1>
</div>
</div>
</div>
</div>
</div>

Too many div right? Is it for inheritance?

I want to know if I should follow that and what is the purpose?

Answer 1

Jonathan P. Jundarino Assuming someone was simply experimenting with creative designs using this markup, it would help to review the CSS to understand what's going on.

Generally speaking, the <h1> tag is located within 5 div tags.

Think of each div tag as a layer that could be visually manipulated in such a way that's independent of the other div tags.

You could structure it such that the <h1> text is stacked with different shades on each layer.

Attempting to do something creative on a single block element is very limited.

See this simple code showing a few styles this snippet could have been going for.

https://code.sololearn.com/WFmRPrIBXu49/?ref=app

In short, it's about adding layers to support some styling that may otherwise be difficult to implement.

However, I recommend avoiding such superfluous markup for styling purposes. There's often better alternatives for accomplishing this without tightly coupling the markup to styling.

Answer 2

When you can specify which part of your code is article or section or header or navigation bar, you should consider using the article,section , header and nav tag instead of div tag to make your code more readable .

Answer 3

The div tag is used in HTML to make divisions of content in the web page like header,footer,body,etc..it is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS..

Answer 4

Wow, I really appreciate everyone for your comments thanks. David Carroll But wow, that's in another level I've seen. Thanks for that effort 🥰, it would help me understand very much. You're a great help thanks.

Answer 5

They use too many divs for

Positioning elements correctly
Adding beautiful style effect and for many more purposes.

Answer 6

Flexbox and grid are mostly use weapon for responsiveness and they require a lot of control on an element to position them correctly so that the white space( one of the most important tool of ui) can be acheived. Flexbox parent and child element had also their on effect like self contract, wrap on overflow, scope... these effects can be control with proper control.

When you see bootstrap (flexbox based) it also has lots of divs...

Answer 7

Okay thanks, but can you or someone explain it in deeper way? I'm trying to understand them, to the point I can explain them confidently.

Answer 8

Well, it's enough, thanks

Answer 9

Welldon