HTML Div

HTML Tutorial: HTML Div

Learn how to use <div> for page sections, layout, and styling with colorful examples

---

The <div> element is a block-level container used to group content. It helps structure webpages and apply CSS styles.

---

1️⃣ Basic Div Example

INPUT:

<div>
  
Welcome to My Website
  
This is a section inside a div.
</div>

OUTPUT:

Welcome to My Website

This is a section inside a div.

✔️ Div wraps related content ✔️ Useful for grouping and layout

---

2️⃣ Div with Background Color

INPUT:

<div style="background-color:#ffcc00; padding:10px; border-radius:8px;">
  
Highlighted Section
  
Div with background color and padding.
</div>

OUTPUT:

Highlighted Section

Div with background color and padding.

✔️ Use background-color, padding, border-radius to style divs ✔️ Creates visually distinct sections

---

3️⃣ Multiple Divs for Layout

INPUT:

<div style="background-color:#0077cc; color:white; padding:10px;">
  Header
</div>

<div style="background-color:#f0f7ff; padding:10px;">
  Main Content
</div>

<div style="background-color:#0077cc; color:white; padding:10px;">
  Footer
</div>

OUTPUT:

Header

Main Content

Footer

✔️ Divs can structure page sections like header, content, and footer ✔️ Helps maintain consistent layout

---

4️⃣ Div with Inline Styling & Nested Divs

INPUT:

<div style="background-color:#e0f7ff; padding:15px; border-radius:10px;">
  
Container Div
  <div style="background-color:#ffccdd; padding:10px; margin-top:10px;">
    Nested Div
  </div>
</div>

OUTPUT:

Container Div

Nested Div

✔️ Nested divs allow content grouping inside sections ✔️ Inline CSS styles can highlight important parts

---

🎯 Best Practices

• Use divs to organize page sections logically
• Apply colors, padding, and borders for clarity
• Combine nested divs for layout structure
• Keep code readable and indented properly
• Use CSS classes for reusable styling instead of inline styles in production

---

🚀 What’s Next?

👉 HTML Classes

Next lesson will cover:

• Using class attribute to style elements
• Multiple elements sharing the same class
• Combining divs and classes for advanced layout

---

Div elements are the foundation of HTML layout, allowing flexible structure, styling, and nested content sections.