Question for HTML & CSS developers
Question for all of my web developers out there: What is the point of wrapping divs inside of divs. I often see people wrapping divs inside of divs for what seems like no real reason.
I'm asking because I'm a learning developer and I need to understand the significance in this?
Mainly because it helps to create responsive UI. When you want to use flex or relative positive property or rows and columns - a good div structure is helpful.
Depends on what you are doing. It may be for CSS purposes or if you are using something like React, if you have a conditional statement with multiple elements, you have to wrap it in something and a div is faster to type than a React.fragment. Could also be due to nested components that each have their own wrapper that, when nested, results in a stack of divs. As the previous poster mentioned, website builders are notorious for code bloat.
Could you give me an example of a positive use of a div and a negative use of a div?
I'm just new in my development journey and am looking for clarification on these things lol
div and span are the generic unstyled elements in HTML and they have no semantic meaning for screen readers and the like.
Div is the generic block level element. Without CSS, it is as wide as it's container, but has no height. It just forces a break after it. Basically it is an empty box. That is what you use it for, to create "boxes". Because it has no dimensions on it's own, it is the default element to use as a container.
Span is the generic inline element. Think of it as if you were in a text editor and you highlighted a piece of text. The highlight itself does nothing and means nothing until you apply some other formatting (in this case, CSS) to it.
When you need to add tags, such as for CSS nesting, but don't want/need the semantic implications or the preset CSS, you use div/span.
For example, you want to have a navigation bar at the top of the page. You would use a div to wrap around as the container. You wouldn't use something like a <p> as it would be inappropriate and has rules around how it is used and preset styling.
The wrapper around the vote/comments/report block floating at the bottom of this page is another example of where you would use a div as the container for that.
Doing <div><div><div></div></div></div> has no actual effect and is no different than <div></div> until you apply CSS. There are times when you need an extra nesting level to get the CSS effect you want, so it isn't really harmful to do, it just causes a little extra parsing and calculations for the browser.
Code generators tend to have a lot of "code bloat" because it is very difficult to generate code to get exactly what people want, particularly when they edit and move things multiple times. Each time they edit/move things tends to generate additional containers. Since a <div> has no styling or dimensions on it's own, that is what is used (and what it was intended for). With the speed of networks and browsers these days, the code bloat is fairly irrelevant as it has almost no impact on load times unless it is very egregious.
Depends some folks use website builders that bloat the page.
For actual coders, divs are usually added to create multiple rows or columns inside another div.
Yeah, but why though? Why not just use one div for the entire section? I've seen developers wrap their divs in divs. And to me it just looked like a waste of code.
If I use flex and want two columns I need to wrap each column in a div.
Of course there are "bad" developers who over use divs.
Ok. So that makes sense. So it is a sign of bad development when you see them overused. lol thanks for clarifying. I knew something wasn't right about that.
Now my next question is at what point does a div become "overused"?