Understanding Block vs Inline Elements
If you’re just starting with HTML and CSS, you’ve probably seen the words block and inline and thought, “What does that even mean?” You’re not alone.
In this article, you’ll learn:
- What block and inline elements are
- How they affect the layout of your web page
- How to recognize and use them in your own code
By the end, you’ll be able to look at a piece of HTML and confidently predict how it will appear on the page.
What Are HTML Elements, Anyway?
HTML pages are built from elements. Each element is like a building block of your web page: paragraphs, headings, links, images, buttons, and more.
An element usually looks like this:
<p>This is a paragraph.</p>
<p>is the opening tag</p>is the closing tag- The text inside is the content
Different elements behave differently on the page. That’s where block and inline come in.
The Big Idea: Block vs Inline
Block Elements
A block element:
- Always starts on a new line
- Stretches as wide as it can (usually the full width of its container)
- Stacks vertically, one on top of another
Common block elements:
<div>— a generic container<p>— a paragraph<h1>to<h6>— headings<header>,<footer>,<section>,<article>— layout and structure
Think of block elements like big boxes that take up the full row.
Inline Elements
An inline element:
- Does not start on a new line
- Only takes up as much width as it needs
- Sits inside a line of text
Common inline elements:
<span>— a generic inline container<a>— links<strong>— bold text<em>— emphasized (usually italic) text<img>— images (inline by default)
Think of inline elements like words in a sentence—they sit next to each other on the same line.
Example 1: Seeing Block Elements in Action
Let’s start with a simple HTML file to see how block elements behave.
<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<!-- Headings are block elements -->
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
<!-- Paragraphs are block elements -->
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
What you’ll see in the browser
h1appears on its own line.h2appears below theh1, also on its own line.- Each
<p>starts on a new line, with space above and below.
All of these are block elements, so they stack vertically.
Try it yourself
- Create a file called
block-example.html. - Paste the code above into it and save.
- Open it in your browser (double-click the file).
- Add a third
<p>and see how it appears.
You’ll notice: every new block element appears beneath the previous one.
Example 2: Seeing Inline Elements in Action
Now let’s look at how inline elements behave when placed inside a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<p>
Here is a <strong>bold word</strong> inside a sentence.
Here is an <em>italic word</em> inside the same paragraph.
</p>
<p>
Visit <a href="https://example.com">this link</a> for more info.
</p>
</body>
</html>
What you’ll see in the browser
- The bold and italic words do not start on new lines.
- They appear inside the sentence, just like normal text.
- The link appears as part of the sentence, not on its own line.
<strong>, <em>, and <a> are inline elements. They live inside lines of text.
Try it yourself
- Add more text before and after the inline elements.
- Notice how everything stays on the same line until the browser decides it needs to wrap the text.
For example:
<p>
This is some text before the <strong>bold word</strong> and some text after it.
</p>
All of this still appears as just one paragraph.
Example 3: Mixing Block and Inline Elements
Now let’s combine both types to see how they interact.
<!DOCTYPE html>
<html>
<head>
<title>Block and Inline Together</title>
</head>
<body>
<!-- Block element -->
<h1>My Simple Page</h1>
<!-- Block element containing inline elements -->
<p>
Welcome to my page. Here is a
<strong>very important</strong> word
and here is a
<a href="https://example.com">useful link</a>
all inside one paragraph.
</p>
<!-- Another block element -->
<p>
This is another paragraph below the first one.
</p>
</body>
</html>
What you’ll see in the browser
h1appears at the top on its own line.- Below it, you’ll see the first paragraph with bold text and a link inside the same block of text.
- Below that, another paragraph appears on a new line.
Here’s the key idea:
- Block elements (like
<p>) can contain inline elements (like<strong>and<a>). - Inline elements live inside block elements, not the other way around.
Example 4: Div and Span – Your Layout Helpers
Two very common elements you’ll see in almost every website are <div> and <span>.
<div>is a block element.<span>is an inline element.
They don’t have meaning by themselves. They’re mainly used to group content so you can style it with CSS.
<!DOCTYPE html>
<html>
<head>
<title>Div and Span Example</title>
<style>
/* Just some simple colors to visualize */
.box {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<!-- div is block-level -->
<div class="box">
<p>This is a paragraph inside a div.</p>
<p>It stays in its own block area.</p>
</div>
<!-- span is inline -->
<p>
This sentence has a
<span class="highlight">highlighted section</span>
using a span.
</p>
</body>
</html>
What you’ll see in the browser
- The
<div>appears as a boxed area (thanks to the CSS) that takes the full width available. - Inside the
<p>, the<span>only wraps the words it contains, and only that part has a yellow background.
Try it yourself
- Add another
<div class="box">with different text. It will appear below the first box. - Add another
<span class="highlight">around different words in the paragraph and see what changes.
Why This Matters When You Start Styling
When you begin writing CSS, knowing whether an element is block or inline will help you:
- Understand why something is on a new line or not
- Control spacing and layout more effectively
- Avoid layout “mysteries” where things don’t line up as expected
For example, by default:
- You can set
widthandheighton block elements and see a clear box. - Setting
widthandheighton inline elements often doesn’t work as you expect because they shrink to fit their content.
You can change an element’s display type with CSS (for example, make an inline element behave like a block), but first it’s important to understand the defaults.
Quick Practice Ideas
Here are a few small experiments you can try right now:
Turn a link into a block
- Create an
<a>element and wrap it around some text. - In CSS, add:
a { display: block; } - See how it suddenly takes its own line.
- Create an
Add borders to see the boxes
- Add this CSS:
* { border: 1px solid lightgray; } - This will put a light border around every element so you can see which ones take full width and which don’t.
- Add this CSS:
Compare span and div side-by-side
- Add several
<div>and<span>elements and use background colors. - Watch how divs stack while spans sit next to each other.
- Add several
These small experiments will deepen your understanding quickly.
Recap: Key Takeaways
- Block elements start on a new line and usually take up the full width (e.g.,
<div>,<p>,<h1>). - Inline elements stay inside a line of text and only take up as much space as they need (e.g.,
<span>,<a>,<strong>). - Block elements often contain inline elements, not the other way around.
<div>(block) and<span>(inline) are your basic layout tools for grouping and styling content.- Understanding block vs inline will make your HTML and CSS layouts far easier to control.
Learning to code can feel like a lot at first, but you’ve just taken an important step. Next, you can explore CSS display types like inline-block and flex, which build on the same ideas you’ve learned here.
Keep experimenting, keep breaking things (safely, in your own files!), and you’ll be surprised how quickly this all starts to feel natural.
