Why should we use divs if they don't change things visually?

I was wondering the same thing as the OG question. Thanks a lot, this was very concise.

hi my question is why do we add divs before and after h2 or h3 elements like this? Like how do you know when to add div to an element ?

Capture

3 Likes

div is an element, so the question isn’t entirely accurate.

There isn’t a fixed answer for your question, given it depends on the design and layout of your page. But if you want to different h2 elements + h3 elements + maybe some paragraphs of information in 3 columns, the divs you added is a first good step

2 Likes

<div> is a section element that allows us to break the document into smaller pieces along their semantic lines. For instance the first division above contains only navigation to the other sections. The other sections pertain to particular details.

6 Likes

thank you for the reply

1 Like

thank you for the explanation i get it now

2 Likes

Hello there. It’s my second time posting a question, and I hope this is the right way to do it “By replying to someones elses comment”. Correct me if I am wrong.
My question is from the “Divs” excercise. Divs are containers that divide a page into sections. Can we also use the br tag for the same function div performs?

The best way to ask a question is to start a new topic in the category related to the lesson.

<div></div> is a sectioning element, whereas <br> is a simple line-break. They are not equivalent.

7 Likes

Just a note, I’m very new to coding, but I used to code layouts that went on presentation boxes for an online game. They were pretty basic, but anyway unless you used the <div> tag at the end of the layout (it was basically a picture with text boxes on top) then it wouldn’t understand that the layout was separate from the rest of the stuff on the page and it was prone that the other images on the presentation would combine (usually by covering up the most important parts of the layout) with the layout. It was really annoying!!!

I like your explanation… Thank you!

How would you use div to place the scroll bar, or divide replies, if div does’t make any visual changes?

they do make a difference, lets compare:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
</head>
<body>
  helllo world
</body>
</html>

with:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
</head>
<body>
  <div>helllo</div><div>world</div>
</body>
</html>

combine this with some styling:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
  <style>
    div {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div>helllo</div><div>world</div>
</body>
</html>

we can more clearly start seeing how division is occurring.

1 Like

Can u pls explain ho will the output be without div vs with div pls for further clarification?

Well, without division all the content would just be from top to bottom. See the scrollbar at the right hand side of this page? By using div combines with styling and positioning, we can place the scroll bar there.

thank you so much for the explanation! I understand how useful Div is now

Thank you so much for explaining this! :star_struck: