HTML Block and Inline - The Difference Between div and span
You have noticed that some elements - like <p> and <h1> - start on a new line automatically,
while other elements - like <strong> and <a> - appear on the same line as text.
Why? That is what this lesson answers.
Every HTML element belongs to one of two categories: Block or Inline.
Block Elements
A block element has two main characteristics:
- It always starts on a new line - elements before and after go to their own lines
- It takes the full available width - stretches across the container
<!-- Each one appears on its own line -->
<h1>This is a heading (Block)</h1>
<p>This is a paragraph (Block)</p>
<div>This is a div (Block)</div>
Common Block Elements:
| Element | Purpose |
|---|---|
<div> | Generic block container |
<h1> - <h6> | Headings |
<p> | Paragraphs |
<ul>, <ol>, <li> | Lists |
<table> | Tables |
<form> | Forms |
<header>, <footer>, <section>, <article> | Semantic structural elements |
<pre>, <blockquote>, <hr> | Special text elements |
Inline Elements
An inline element has two very different characteristics:
- It does not start a new line - it stays within the text flow
- It takes only the width needed by its content - no more
<!-- strong, em, and a stay on the same line with text -->
<p>
Learn <strong>HTML</strong> then <em>CSS</em> then
<a href="javascript.php">JavaScript</a> - all in one line!
</p>
Common Inline Elements:
| Element | Purpose |
|---|---|
<span> | Generic inline container |
<a> | Links |
<img> | Images |
<strong>, <b> | Bold text |
<em>, <i> | Italic text |
<mark>, <del>, <ins> | Text formatting |
<br> | Line break |
<input>, <button>, <label> | Form elements |
Visual Difference - Direct Comparison
<!-- Block: each element takes its own full line -->
<div style="background: lightblue; margin: 5px;">I am a div (Block) - I fill the whole line</div>
<div style="background: lightgreen; margin: 5px;">I am a second div - on a separate line</div>
<!-- Inline: elements sit side by side on the same line -->
<span style="background: lightblue;">I am a span (Inline)</span>
<span style="background: lightgreen;">I am a second span - next to the first!</span>
<span style="background: lightyellow;">And I am third - on the same line</span>
The Two Core Containers - <div> and <span>
These two containers are special: they have no semantic meaning - they are just containers for grouping elements and applying styles with CSS.
<div> - The Block Container
Short for Division. It is used to group large sections of the page - like navigation, main content, footer.
<div id="header">
<h1>Site logo</h1>
<nav>Navigation</nav>
</div>
<div id="main-content">
<h2>Latest articles</h2>
<p>First article content...</p>
</div>
<div id="footer">
<p>All rights reserved 2025</p>
</div>
<span> - The Inline Container
Used to style or highlight a small part of text without breaking the line flow.
<p>
Course price:
<span style="color: red; text-decoration: line-through;">$200</span>
now
<span style="color: green; font-weight: bold;">Free!</span>
</p>
<p>
Today I learned <span style="background: yellow;">Block and Inline</span> in HTML.
</p>
The Golden Rule - What Is Allowed and What Is Not
<!-- Yes: Inline inside Block -->
<p>This text has a <strong>important word</strong> in the middle.</p>
<div><a href="#">A link inside a div</a></div>
<!-- No: Block inside Inline -->
<span><div>This is not correct!</div></span>
<a href="#"><p>Paragraph inside link - invalid in HTML5!</p></a>
<!-- Yes: Block inside Block -->
<div>
<h2>Section title</h2>
<p>Section content</p>
</div>
<a> tag in HTML5 can sometimes contain block elements - for example, making an entire card clickable. But as a general rule, avoid placing Block inside Inline.
How Does CSS Change This Behavior?
CSS lets you change the behavior of any element using the display property:
<!-- Make span behave like Block -->
<span style="display: block;">Now I start on a new line!</span>
<!-- Make div behave like Inline -->
<div style="display: inline;">Now I stay on the same line!</div>
<!-- inline-block: a mix of both -->
<div style="display: inline-block; width: 100px;">Small box</div>
<div style="display: inline-block; width: 100px;">Second box next to it</div>
Frequently Asked Questions - FAQ
Why does <img> not behave exactly like normal inline?
<img> is actually inline-block. It stays in the same line like inline, but it accepts width and height like block. That is why you can set its dimensions directly.
What is the difference between <div>, <section>, and <article>?
All are block elements. But <div> has no semantic meaning.
<section> means a section of related content.
<article> means a self-contained piece of content (article, card).
In modern HTML5, it is preferred to use semantic elements instead of <div> whenever possible.
Does Block/Inline affect SEO?
Indirectly, yes. Using the correct semantic elements (h1, p, article...) instead of filling the page with meaningless divs helps Google understand your content structure.