Why do web developers use too much div? | Sololearn: Learn to code for FREE!

+2

Why do web developers use too much div?

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?

6/24/2021 10:24:24 AM

Jonathan P. Jundarino

10 Answers

New Answer

+14

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.

+9

A DIV is a container (box) to put things in. By grouping blocks of text, graphics, and form controls into different boxes it makes it easier to control the layout dynamically to produce responsive web designs, show/hide menus, create image carousels and slideshows, etc.

+6

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 .

+6

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

+5

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.

+3

They use too many divs for Positioning elements correctly Adding beautiful style effect and for many more purposes.

+2

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

+1

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.

+1

Well, it's enough, thanks

+1

Welldon