Block and Inline Elements
Learn the difference between block-level and inline elements.
Syntax
<div>block</div> vs <span>inline</span>Every HTML element is either block-level or inline by default.
Block-level elements
A block element starts on a new line and takes up the full width available. Examples: <div>, <p>, <h1>.
Inline elements
An inline element does not start on a new line and only takes up as much width as it needs. Examples: <span>, <a>, <strong>.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses <div> (block) to wrap a card section and <span> (inline) to color a single word inside a sentence.
- A designer relies on block-level <p> tags to stack paragraphs vertically on the page.
- A developer wraps a price value in a <span> with a class to apply CSS styling without breaking the surrounding text flow.
More examples
Block elements stack vertically
Block-level elements like <p> and <div> each start on a new line and stretch to full width.
<p>First paragraph — takes full width.</p>
<p>Second paragraph — starts on a new line.</p>
<div>A div block below both paragraphs.</div>Inline elements stay in text flow
Inline elements like <strong> and <span> sit inside a line of text without forcing line breaks.
<p>Price: <strong>$29</strong> — save <span class="highlight">15%</span> today.</p>Mixing block and inline elements
Block elements (<section>, <h2>, <p>) provide structure while inline elements style content within lines.
<section>
<h2>Offer</h2>
<p>Get <em>unlimited</em> access for <strong>free</strong> this month.</p>
<a href="/signup">Sign up</a>
</section>
Discussion