Generic Containers
<div> and <span> carry no semantic meaning of their own. They exist purely to group content so it can be styled with CSS or manipulated with JavaScript.
div Example
<div class="card">
<h2>Product Name</h2>
<p>Product description goes here.</p>
</div>div is Block-Level
<div> is a block-level element — it starts on a new line and takes up the full available width by default. It is commonly used to group sections of a page, like a card, header, or sidebar.
span is Inline
<span> is an inline element — it does not start on a new line and only takes up as much width as its content. It is used to style or target a small piece of text within a larger block.
span Example
<p>The price is <span class="highlight">$49.99</span> today only.</p>div vs span
| Element | Display | Typical Use |
|---|---|---|
| <div> | Block-level | Grouping larger sections of content |
| <span> | Inline | Styling or targeting a piece of text |
Prefer Semantic Elements First
Before reaching for <div>, check if a semantic element fits better — <header>, <nav>, <main>, <section>, and <article> all describe their content more meaningfully than a generic <div>.
"Divitis"
Overusing <div> for everything is sometimes called "divitis". It makes markup harder to read and less accessible. Reach for semantic HTML5 elements whenever one fits the content.
Best Practice
Use <div> and <span> only when no semantic element applies — typically for pure styling hooks or layout wrappers with no inherent meaning.