Tag div

The div tag defines a generic container used to group and organize content in HTML. It has no semantic meaningon its own but is commonly used for layout, styling, and scripting.

Think of it as an invisible box you can fill with anything: text, images, other HTML elements, etc.

---

✅ Basic Syntax

<div>
  <p>This content is inside a div.</p>
</div>

📍 Result:
The content is grouped in a block-level container. Nothing special happens by default, but you can apply CSS styles, JavaScript, or layout logic to it.

---

🎯 Common Uses

• Page layout structure
• Grouping sections for styling
• Wrapping content to apply JavaScript
• Making grids, cards, modals, etc.

---

🎨 Styling a <div> with CSS

<style>
  .box {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
  }
</style>

<div class="box">
  <h2>Welcome</h2>
  <p>This is a styled div container.</p>
</div>

📍 The class="box" applies custom styles to this div.

---

🧩 Attributes You Can Use

Attribute	Description
id	Unique identifier
class	Assigns a CSS class
style	Inline styling (not recommended long-term)

Example:

<div id="header" class="main-header" style="background: #333; color: white;">
  <h1>Site Title</h1>
</div>

---

⚠️ Semantic Tip

Since <div> has no semantic meaning, use semantic tags like <header>, <main>, <article>, or <section> when applicable.

Use <div> when:

• No semantic tag fits
• You need a generic container
• You’re applying layout with CSS frameworks (e.g., Bootstrap, Flexbox, Grid)

---

✅ Summary

Tag	<div>
Purpose	General-purpose block container
Semantic?	❌ No — use only when semantics aren’t needed
Styling	Easily styled with CSS
Common Use	Layout, grouping, scripting

---