What is the difference between <div> and <span>?

<div> is a block-level container that starts on a new line; <span> is an inline container that flows with text.

HTML

Overview

`<div>` and `<span>` are both generic containers with no semantic meaning, but they differ in their default display behaviour. `<div>` is block-level; `<span>` is inline. Choose based on context, but prefer a semantic element (like `<article>`, `<section>`, `<p>`, `<strong>`) whenever one fits.

Key Points

•`<div>` is `display: block` takes the full width, starts on a new line.
•`<span>` is `display: inline` sits inside text without breaking the flow.
•Both have zero default styling; they exist purely as hooks for CSS and JavaScript.
•Use `<div>` to group sections of the page; use `<span>` to target a word or phrase within text.
•Prefer semantic HTML: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>` over bare `<div>`.

Examples

div for layout, span for inline styling

html

<div class="card">
  <p>The price is <span class="price">$29.99</span> today.</p>
</div>

<div> wraps the card layout; <span> targets only the price text.

Default rendering difference

html

<div>First block</div>
<div>Second block</div>  <!-- starts on a new line -->

<span>First inline</span>
<span>Second inline</span>  <!-- stays on the same line -->

Prefer semantic elements

html

<!-- Avoid: no meaning -->
<div class="nav">...</div>
<div class="article">...</div>

<!-- Better: semantic -->
<nav>...</nav>
<article>...</article>

Pro Tip

Before reaching for `<div>`, ask: is there a semantic element that describes this content? Screen readers, search engines, and future developers all benefit from semantic HTML.