<div> and <span> are the workhorses of HTML layout. They are generic containers with no inherent meaning — they exist purely to group content so you can style or script it.
Before diving in, understand the key distinction:
| Type | Element | Behaviour |
|---|---|---|
| Block | <div> | Takes full width, starts on a new line, can contain any content |
| Inline | <span> | Takes only as wide as its content, sits within a line of text |
<div>This is a block element — it takes a full line.</div>
<div>This is the next block element — it starts below.</div>
<p>This sentence has a <span>highlighted word</span> inside it.</p>
<div> element<div> (division) is used to group larger sections of content for layout purposes:
<div class="card">
<h2>Article Title</h2>
<p>Some article text.</p>
</div>
Without CSS, a <div> is invisible. Add a class or id to hook it up with styles.
<span> element<span> targets a small piece of inline content — a word, phrase, or icon — without breaking the flow of text:
<p>The price is <span class="price">$29.99</span> today only.</p>
Common use cases:
class — for styling multiple elements the same way (e.g., all .card divs)id — for uniquely identifying one element (e.g., #main-content)<div id="sidebar">
<div class="widget">Widget 1</div>
<div class="widget">Widget 2</div>
</div>
<div class="container"> that wraps all of the page content.<div class="card"> elements..card, add an <h2> and a <p>.<span> to highlight a word (e.g., class="highlight").