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


#1

I don’t see any visual or sectional changes to the text when I add the <div> tags. Is there supposed to be some change in appearance? If not, what’s the point of this exercise if we cannot see the changes take place during the <div> exercise?


FAQ: Learn HTML Elements - Intro to HTML - Divs
What is the use of the div tag in this case?
FAQ: Learn HTML Elements - Intro to HTML - Divs
#2

div (short for division) allows us to divide our page into different sections, to position this sections. Divs are very useful. The change might not be the most visual one, doesn’t make it less useful.

if we only used text, everything would just be from top to bottom. Look at this forum, imaging where divs might be (to divide different replies for example), or to place the scroll bar on the right hand side of the page and staying there even though we are scrolling through the replies.


#3

Thanks for the thorough explanation! I understand the utility of div now, even if the visual changes aren’t readily apparent.


#4

Which implies a border or horizontal rule.

Short for division, implies a container.

DIVisions have no height, but come with width: 100% by default. Their height grows automatically as content is inserted. They can be set to a fixed height that triggers a scroll bar when the content overflows the allowed container size.


#5

Thanx for this reply, it’s helped to increase my undertanding of the “div” tag


#6

Thanx mtf for this angle of explanation concerning “div” tags. am really learning… yaaayyy


#8

Thank you mtf, I am getting a better understanding of “containers”. Neat!


#9

Most visual changes and usage of the

tag appear with CSS code, however, I find the <div> tag is useful also in coding only in HTML. It’s usefulness in html code come to group HTML elements for easier code readability. But a comment would do the same goal, so I’m not really sure.
Regardless, here is an example:
<div>

  <div>
    <h1>Book of the Brown Bears</h1>
  </div>

  <div>
    <h2>Species</h2>
    <h3>Polar Bears</h3>
    <h3>Mountain Bears</h3>
  </div>

  <div>
    <h2>Features</h2>
    <h3>Small Rounded Ears</h3>
    <h3> Shaggy Hair</h3>
    <h4>Short Tails</h4>
  </div>

</div>

#10

Very helpful reply. Thank you


#11

You will appreciate the importance of divs when you start targeting sections to style…even right inside HTML, we can’t thank divs enough. I’m sure you’ll discover this yourself down the way. You will learn of IDs etc. Don’t worry. Just continue the lesson in the understanding that divs are used for sectioning elements and later targeted and their children and descendants styled together as a unit/section.


#12

Nice example! Thank you so much!


#13

What a useful comment… Thank you.


#14

Are divisions used as the indentations of a new paragraph like in an essay? If not? Why are they necessary in the code? I’m new and I just want to know please.


#15

Thanks for this example! I am new to coding and now I understand why divs make a difference. Great example!


#16

No, divisions aren’t strictly necessary, as they have no visible appearance. What they do is mainly to help you style the page better.

For example, you may want to contain part of your page in one <div> tag and another part in another <div> tag. If you do this, you can give each <div> a unique id to help you style elements in different <div>s differently.

I hope this helps!


#17

The divisions can also be used for positioning (unless that is what you mean by styling?)

if you make a website, to get the look you are after, you most certainly need divisions, for the structure, layout and positioning.


#18

Yeah, I was including positioning in styling. Thanks for clarifying!


#19

Thank you very much!
Very good explanation.


#20

Merci pour votre explication ! très utile pour mieux comprendre.