The <div> Element:

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.

The <div>...</div> element offers developers a block-level element to group other elements together.

This element is heavily used by developers to increase structural clarity and identify element groups. This in turn, increases readability, which is always desired.

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.

Block Level Elements

Notice in the code below that the use of the <div> element creates blocks that appear on a new line (2 images and a heading).

Block elements appear on their own block on a new line. Other examples of block elements include;

• Headings <h1>-<h6>
• Paragraphs <p>

Each of these, unless told otherwise through styling, appears on a new line in HTML pages.

Altogether Now

{ TODO: }

Read pages 185-187 of Chapter 08 in Duckett.

---