What is the DIV Tag in HTML

The <div> tag is the most used element in HTML. It's a generic container that groups content together for styling and layout purposes.

What is a <div>?

DIV stands for "division". It creates a block-level container that takes up the full width available:

<div>
  <h2>Card Title</h2>
  <p>Card description goes here.</p>
  <button>Read More</button>
</div>

Why Use Divs?

• Grouping — Wrap related elements together
• Styling — Apply CSS to a group of elements
• Layout — Build page structure with CSS Flexbox/Grid

Real-World Example: Card Layout

<div class="card">
  <img src="product.jpg" alt="Product">
  <div class="card-body">
    <h3>Product Name</h3>
    <p>$29.99</p>
    <button>Add to Cart</button>
  </div>
</div>

Div vs Span

Feature	<div>	<span>
Type	Block	Inline
Width	Full width	Content width
New line	Yes	No
Use case	Layout sections	Inline text styling

Don't Overuse Divs!

A common mistake is wrapping everything in divs (called "div soup"). Use semantic elements when possible:

<!-- ❌ Div soup -->
<div class="header">...</div>
<div class="nav">...</div>

<!-- ✅ Semantic HTML -->
<header>...</header>
<nav>...</nav>