Divs & Containers

Definition: A <div> is a generic container that groups other elements together. It has no look of its own — its job is to organise content so you can style or position it as a unit.

Grouping with a div

<div>
  <h3>A card</h3>
  <p>Some text inside the same box.</p>
</div>

div vs span

• <div> — a block container (takes a full line)
• <span> — an inline container (sits within a line of text)

Semantic containers

Modern HTML also has named containers that describe their purpose: <header>, <nav>, <section>, <footer>. They work like a div but are clearer and better for SEO.

💡 Tip: divs become powerful once you add CSS — they are the boxes you colour, space, and arrange to build layouts.