HTML <div> Element - Detailed Overview

Introduction to the <div> Element

The <div> element is one of the most common elements in HTML. It is a block-level element used to group content together for styling, layout, or scripting purposes.

Basic Usage of <div>

The <div> element is a generic container with no inherent style or behavior. It can be used to group other HTML elements together:

<div>
    <p>This is a paragraph inside a div.</p>
    <p>This is another paragraph inside the same div.</p>
</div>

Styling the <div> Element

The <div> element can be styled using CSS to create various layouts and designs. Here’s an example of a styled <div>:

<div style="background-color: #4CAF50; color: white; padding: 20px;">
    This is a styled div.
</div>

Nested <div> Elements

<div> elements can be nested within each other to create complex layouts. For example:

<div style="background-color: #f0f0f0; padding: 10px;">
    Outer div
    <div style="background-color: #cccccc; padding: 10px;">
        Inner div
    </div>
</div>

Using <div> for Layout

The <div> element is often used to create layouts, especially when combined with CSS. Here’s a simple two-column layout using <div> elements:

<div style="display: flex;">
    <div style="flex: 1; padding: 10px; background-color: #f9f9f9;">
        Column 1
    </div>
    <div style="flex: 1; padding: 10px; background-color: #e9e9e9;">
        Column 2
    </div>
</div>