Grouping with Divs

Up till 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.

stacked building blocks

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.

HTML
<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