Block, Inline, Div & Span
Today we look at block and inline layout, and at div and span: plain boxes you use when you need a group or a wrap without adding extra meaning.
What you'll learn in this lesson
- 1Block elements start on a new line
- 2Inline elements sit inside a line of text
- 3div is a plain block box
- 4span is a plain inline wrap
- 5Prefer semantic tags when meaning exists
- 1
Block vs Inline Display Rules
In HTML, elements behave in two fundamental ways on the screen: some tags start on a new line and take the full width of their parent container. Those are block elements. Others sit inside the continuous flow of text and only take the width they need. Those are inline elements.
Today we master that difference and learn the two essential generic containers:
<div>(block container) and<span>(inline wrap). - 2
The Grouping Dilemma: Layout Boxes vs Word Targetting
Sometimes you need a container around a few elements so you can style them or move them together, but you do not want to declare “this is an article” or “this is a header.” You simply need a generic grouping box.
Other times you need to wrap two words inside an existing sentence to color them or attach a click event, without breaking onto a new line. HTML gives you
<div>for the block box, and<span>for the inline text wrap. - 3
How the Browser Draws Boxes vs Text Flow
A block element starts on a new line and automatically stretches across its parent width (100%). Headings (
<h1>to<h6>), paragraphs (<p>), and<div>behave this way.An inline element stays in the line flow without forcing a break.
<strong>,<em>,<a>, and<span>behave this way.In the example below, the
<div>wraps the heading and paragraph as one outer card. The<span>wraps only the words “ID card” inside the paragraph so they remain on the same line. - 4
Hands-On: Notice Card with a Div Box and Inline Span
Read the notice code below. Notice how the outer
<div>stacks the heading and paragraph, while the inner<span>sits seamlessly inside the sentence. - 5
Plain Boxes vs Semantic Meaning
<div>and<span>carry zero semantic meaning. When a specific tag fits (such as<article>,<header>, or<mark>), prefer that tag. Usedivandspanpurely when styling or scripting layout groups.
Always begins on a new line and stretches across the entire available width. Common block tags: div, p, h1-h6, section, ul.
Stays inside the same line of text and only takes up as much width as its content. Common inline tags: span, a, strong, em.
Line by line
<div>A plain block container. It groups the heading and the paragraph. It starts on a new line and takes the width of its parent. It does not add meaning by itself.
<h2>Office Notice</h2>A block heading inside the div. It sits on its own line under the start of the box.
<p> ... </p>A block paragraph. It also starts on a new line inside the div, under the heading.
<span>ID card</span>A plain inline wrap around a few words. It stays in the same sentence and only takes as much width as those words need.
Try it yourself
Build a small card with a <div> that contains an <h2> and a <p>. Inside the paragraph, wrap your name in a <span>.
Hint: The span goes inside the paragraph, not around the heading.
💡 View Solution
<div> <h2>Student Profile</h2> <p>Student Name: <span>Alex Carter</span></p> </div>
Which of the following is true about <span> compared to <div>?
Common mistakes
- 1.Using
<div>for every region of the page. Prefer labelled tags when you know the meaning. - 2.Putting a block element such as
<p>or<h2>inside a<span>. A span is for words inside a line, not for whole blocks.
Interview prep (Click to reveal)
Q: What is the difference between block and inline?▼
Block elements start on a new line and take the parent container's full available width. Inline elements sit inside the text line and take only as much width as their content needs.
Q: What is the difference between div and span?▼
Both are non-semantic containers. <div> is a block-level container used for grouping larger layout sections, while <span> is an inline container used for wrapping words inside a sentence.
Q: Can a span contain a div or a paragraph?▼
No! An inline element like <span> should never contain block-level elements like <div> or <p>. Doing so breaks HTML validation and browser layout algorithms.