Page 61 - HTML5

Chapter 10: Div Element

Introduction

The div element in HTML is a container element that encapsulates other elements and can be
used to group and separate parts of a webpage. A div by itself does not inherently represent
anything but is a powerful tool in web design. This topic covers the purpose and applications of the
div element.

Syntax

• <div>example div</div>

Examples

Nesting

It is a common practice to place multiple <div> inside another <div>. This is usually referred to as
"nesting" elements and allows for further dividing elements into subsections or aid developers with
CSS styling.

The <div class="outer-div"> is used to group together two <div class="inner-div"> elements; each
containing a <p> element.

<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>

This will yield the following result (CSS styles applied for clarity):

Nesting inline and block elements While nesting elements you should keep in mind, that there
are inline and block elements. while block elements "add a line break in the background", what
means, other nested elements are shown in the next line automatically, inline elements can be
positioned next to each other by default

Avoid deep <div> nesting

https://riptutorial.com/ 45