HTML Div Element Nesting
Example
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
A deep and oftenly used nested container layouts shows a bad coding style.
Rounded corners or some similar functions often create such an HTML code. For most of the last generation browsers there are CSS3 counterparts. Try to use as little as possible HTML elements to increase the content to tag ratio and reduce page load, resulting in a better ranking in search engines.
div section Element should be not nested deeper than 6 layers.
