Why div elements?

HTML-CSS
1

Tell us what’s happening:
So, I was very curious to know why this snippet of code (and all the others) use a div container. I previously searched for why a div container is useful and got back that it can handle more sophisticated styling, but I’m still very confused. Why give them classes and id’s? Does it neaten the code?

Your code so far


<style>

.balls {
  border-radius: 50%;
  background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );
  position: fixed;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#ball1 {
  left:27%;

}
#ball2 {
  left:56%;

}

@keyframes bounce {
  0% {
    top: 0px;
  }
  100% {
    top: 249px;
  }
}

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
2

All the elements have a definitive purpose.
Text - p, abbr, b, s, i, sup, sub, etc
Table - table, tr, td, th, thead, tbody, etc
Form - button, input, label, etc.
Sementic - main, section, header, footer, etc.

Div doesn’t have a definitive purpose, you can use it for basically anything if you know how to modify it in CSS and JS. Use it for styling, use it as layout container, use it as an output box. Whatever you can think of.

Also worth mention that span is similar to div, it allow you to motivate in between content to insert styling.

<p>For example, a sentence <span style="font-size:50px">with font size 50px big.</span></p>
2 Likes
3

Thanks! And yeah span is super useful.
That makes a lot of sense, it’s just confused me because it’s everywhere.