HTML Div Element

Creating containers and layouts with div elements

📦 What is HTML Div?

The <div> element is a generic container that groups other HTML elements together. It's used for styling, layout, and organizing content sections on web pages. 


<!-- Basic div example -->
<div>
    <h2>Section Title</h2>
    <p>This content is inside a div container.</p>
</div>

Output:

Section Title

This content is inside a div container.

Common Uses of Div

🏗️

Layout Structure

Create page sections and layouts 

<div class="header">...</div>
<div class="content">...</div>
🎨

Styling Groups

Apply CSS to multiple elements 

<div class="card">
  <h3>Title</h3>
  <p>Content</p>
</div>
📱

Responsive Design

Create flexible layouts 

<div class="container">
  <div class="row">...</div>
</div>
⚡

JavaScript Interaction

Target elements for scripting 

<div id="dynamic-content">
  Content here
</div>

🔹 Basic Div Structure

Divs are block-level elements that take up the full width available: 

<!-- Simple div containers -->
<div>
    <h3>First Section</h3>
    <p>This is the first div container.</p>
</div>

<div>
    <h3>Second Section</h3>
    <p>This is the second div container.</p>
</div>

Output:

First Section

This is the first div container.

Second Section

This is the second div container.

🔹 Div with Classes and IDs

Use classes and IDs to style and target specific divs: 

<!-- Div with class -->
<div class="highlight-box">
    <h4>Important Information</h4>
    <p>This div has a class for styling.</p>
</div>

<!-- Div with ID -->
<div id="main-content">
    <h4>Main Content Area</h4>
    <p>This div has a unique ID.</p>
</div>

<!-- Inline styling -->
<div style="background: lightblue; padding: 20px; border-radius: 10px;">
    <h4>Styled Div</h4>
    <p>This div has inline styles.</p>
</div>

Output:

Important Information

This div has a class for styling.

Main Content Area

This div has a unique ID.

Styled Div

This div has inline styles.

🔹 Nested Divs

Divs can contain other divs to create complex layouts: 

<!-- Nested div structure -->
<div class="outer-container">
    <h3>Outer Container</h3>
    
    <div class="inner-container">
        <h4>Inner Container 1</h4>
        <p>Content inside the first inner div.</p>
        
        <div class="nested-content">
            <h5>Deeply Nested</h5>
            <p>This is three levels deep!</p>
        </div>
    </div>
    
    <div class="inner-container">
        <h4>Inner Container 2</h4>
        <p>Content inside the second inner div.</p>
    </div>
</div>

Output:

Outer Container

Inner Container 1

Content inside the first inner div.

Deeply Nested

This is three levels deep!

Inner Container 2

Content inside the second inner div.

🔹 Layout with Divs

Create common web layouts using divs:

🔸 Two-Column Layout 

<!-- Two-column layout -->
<div style="display: flex; gap: 20px;">
    <div style="flex: 1; background: #e3f2fd; padding: 20px;">
        <h4>Left Column</h4>
        <p>This is the left side content.</p>
    </div>
    
    <div style="flex: 2; background: #f3e5f5; padding: 20px;">
        <h4>Right Column</h4>
        <p>This is the right side content (wider).</p>
    </div>
</div>

🔸 Card Layout 

<!-- Card layout -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
    <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; background: white;">
        <h5>Card 1</h5>
        <p>First card content</p>
    </div>
    
    <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; background: white;">
        <h5>Card 2</h5>
        <p>Second card content</p>
    </div>
</div>

Output:

Left Column

This is the left side content.

Right Column

This is the right side content (wider).

Card 1

First card content

Card 2

Second card content

🔹 Div vs Semantic Elements

While divs are versatile, HTML5 provides semantic alternatives:

When to use div vs semantic elements:

  • <div> - Generic container with no semantic meaning
  • <header> - Page or section header
  • <nav> - Navigation links
  • <main> - Main content area
  • <section> - Thematic content sections
  • <article> - Independent content pieces
  • <aside> - Sidebar content
  • <footer> - Page or section footer 
<!-- Using semantic elements instead of divs -->
<header>
    <h1>Website Title</h1>
    <nav>Navigation here</nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>

<!-- Use div for styling containers -->
<div class="container">
    <div class="row">
        <div class="column">Content</div>
    </div>
</div>

🧠 Test Your Knowledge

What type of element is a <div>?