🌱BeginnerText Content
Block vs Inline Elements
Understand the fundamental display difference between block-level and inline HTML elements.
Overview
Every HTML element has a default display behavior: it is either a block element or an inline element. Understanding this distinction is fundamental to building layouts and avoiding confusing rendering issues.
**Block elements** start on a new line and stretch to fill the full width of their parent container. They stack vertically. Examples: <div>, <p>, <h1>–<h6>, <ul>, <li>, <table>, <form>.
**Inline elements** flow within the surrounding text. They only take up as much width as their content and do not force new lines. Examples: <span>, <a>, <strong>, <em>, <img>, <input>.
In HTML5, this distinction has been refined into a more nuanced "content model" system, but block vs inline remains the most practical mental model for beginners.
Key Points
- •Block elements start on a new line and fill their container's width
- •Inline elements flow with text and only take up as much space as their content
- •You cannot put block elements inside inline elements (e.g., <p> inside <a> is invalid)
- •<div> is the generic block container; <span> is the generic inline container
- •CSS can change any element's display behavior with display: block or display: inline
- •Inline-block is a hybrid: flows inline but respects width/height like a block
Examples
Block elements stack vertically
<p>First paragraph takes full width, starts on new line.</p>
<p>Second paragraph also full width, stacked below.</p>
<div>A generic block container.</div>Each block element starts on its own line regardless of content size.
Inline elements flow within text
<p>
Click <a href="#">here</a> to continue.
The word <strong>important</strong> is bold but stays inline.
This <span style="color:red">red text</span> is also inline.
</p>All inline elements flow alongside the text in a single line.
Do not put block elements inside inline elements
<!-- INVALID: block inside inline -->
<a href="#">
<p>A paragraph inside a link</p>
</a>
<!-- VALID: inline inside block -->
<p>
<a href="#">A link</a> inside a paragraph.
</p><div> and <span> as generic containers
<!-- div: generic block-level container -->
<div class="card">
<h2>Card Title</h2>
<p>Card content.</p>
</div>
<!-- span: generic inline container -->
<p>The sky is <span class="highlight">bright blue</span> today.</p>Common Mistakes
- Putting a <p> or <div> inside an <a> tag technically invalid HTML
- Trying to set width/height on inline elements without CSS (inline elements ignore those properties)
- Using <div> and <span> when a semantic element would be more appropriate
Note
When in doubt: if you want content to stack vertically, use a block element or a div. If you want to style a piece of text within a line, use a span.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4