Grouping with Divs
Up until this point, all elements that we have looked at have had specific structural or semantic purposes (i.e. defining a paragraph, heading, emphasized text, or including images). There are, however, elements that provide structure without necessarily implying styling or content.
The <div>...</div> element offers developers a block-level element to group other elements together.
Divs can be singular or nested within each other. This element is heavily used by developers to increase structural clarity and identify element groups. This in turn, increases readability, which is always desired.
It's helpful to think of the <div> element as being a container where you can house specific blocks of content that exist on your webpage. It's a way of breaking up your webpage into sections on the code side of things. It makes your code more readable and understandable both for yourself and others you might be working with on a team.
<div id="one">
<!-- Content -->
</div>
<div id="two">
<!-- Different Content -->
</div>
This element also serves as an easy way to wrap content to style via CSS. By itself, the sole styling implied by the div element is that it will start on a new line