Block-Level and Inline Elements Explained

Introduction

HTML elements behave in different ways when they appear on a web page.

Some elements naturally create large blocks of content. They usually start on a new line and take up the full available width.

Other elements stay inside the flow of a line of text. They only take up as much space as their content needs.

These two behaviours are often described as:

1block-level

and:

1inline

Understanding the difference helps you predict how HTML elements will appear on the page. It also helps when you start using CSS to control layout, spacing, and design.

What Is a Block-Level Element?

A block-level element usually starts on a new line.

It normally takes up the full available width of its parent container.

For example:

1<p>This is the first paragraph.</p>2<p>This is the second paragraph.</p>

In the browser, the two paragraphs usually appear on separate lines because <p> is a block-level element.

The first paragraph creates one block.

The second paragraph creates another block.

Each one starts on a new line.

Common Block-Level Elements

Many common HTML elements behave like blocks by default.

Examples include:

1<h1>

1<h2>

1<p>

1<div>

1<section>

1<article>

1<header>

1<footer>

1<nav>

1<main>

1<ul>

1<ol>

1<li>

These elements are often used for larger parts of a page, such as headings, paragraphs, sections, lists, headers, footers, and layout containers.

A Simple Block-Level Example

Here is a simple example:

1<h1>Welcome</h1>2 3<p>This is a paragraph of text.</p>4 5<p>This is another paragraph of text.</p>

The <h1> starts on its own line.

The first <p> starts on its own line.

The second <p> also starts on its own line.

This is the normal behaviour for block-level elements.

They stack vertically by default.

Block-Level Elements Take Up Available Width

A block-level element usually takes up the full available width of its parent container.

For example:

1<div>2  <p>This paragraph is inside a div.</p>3</div>

The <p> element does not only take up the width of the words. By default, it stretches across the available width of the container.

This is why block-level elements are useful for building page structure.

They create clear sections and rows of content.

What Is an Inline Element?

An inline element does not usually start on a new line.

It stays inside the flow of the surrounding text.

For example:

1<p>This is a <strong>very important</strong> word.</p>

The <strong> element is inline by default.

It does not move “very important” onto a new line.

Instead, it stays inside the paragraph.

The sentence continues normally before and after it.

Common Inline Elements

Many HTML elements behave inline by default.

Examples include:

1<a>

1<strong>

1<em>

1<span>

1<code>

1<small>

1<q>

1<label>

These elements are usually used inside text or alongside other inline content.

A Simple Inline Example

Here is a paragraph containing several inline elements:

1<p>2  Learn <strong>HTML</strong>, practise <em>regularly</em>, and visit3  <a href=”tutorials.html”>our tutorials page</a>.4</p>

The <strong> element makes “HTML” important.

The <em> element emphasises “regularly”.

The <a> element creates a link.

All three elements stay inside the same line of text.

They do not create separate blocks.

Block-Level vs Inline Elements

The basic difference is:

1Block-level elements create larger blocks of content.2Inline elements sit within a line of text.

For example:

1<p>This is a paragraph.</p>2<p>This is another paragraph.</p>

The two paragraphs appear as separate blocks.

But this:

1<p>This is a <strong>strong</strong> word in a sentence.</p>

keeps the <strong> element inside the paragraph.

A useful way to think about it is:

1block-level = starts a new block2inline      = stays in the current line

Comparing Div and Span

The <div> and <span> elements are useful for understanding the difference.

The <div> element is a generic block container:

1<div class=”card”>2  <h2>Website Design</h2>3  <p>Simple websites for small businesses.</p>4</div>

The <span> element is a generic inline container:

1<p>Price: <span class=”price”>£49</span></p>

The <div> groups larger content.

The <span> targets a small part of a sentence.

Use <div> when you need a generic block container.

Use <span> when you need a generic inline container.

Block Elements Can Contain Other Elements

Block-level elements often contain other elements.

For example:

1<section>2  <h2>Our Services</h2>3  <p>We design and build websites for small businesses.</p>4</section>

The <section> element contains a heading and a paragraph.

The heading and paragraph are both block-level elements.

This kind of structure is common in HTML.

Another example:

1<article>2  <h2>How to Add Images Using HTML</h2>3  <p>This article explains the img element.</p>4  <a href=”html-images.html”>Read more</a>5</article>

The <article> contains a heading, a paragraph, and a link.

The link is inline by default, but it can still appear inside a block-level element.

Inline Elements Usually Sit Inside Text

Inline elements are commonly used inside paragraphs, headings, list items, and other text content.

For example:

1<p>2  Use the <code><img></code> element to add images to a page.3</p>

The <code> element is inline.

It marks a small piece of code inside the sentence.

Another example:

1<p>2  This offer is <strong>available today only</strong>.3</p>

The <strong> element is inline.

It marks part of the sentence as important.

Do Not Put Large Block Structures Inside Inline Text

Inline elements are usually intended for smaller pieces of content.

Avoid placing large block structures inside inline elements.

For example, this is a poor structure:

1<span>2  <h2>About Us</h2>3  <p>We create websites.</p>4</span>

A <span> is an inline container, so it is not the right choice for grouping a heading and paragraph.

Better:

1<div>2  <h2>About Us</h2>3  <p>We create websites.</p>4</div>

Better still, if the content forms a meaningful section:

1<section>2  <h2>About Us</h2>3  <p>We create websites.</p>4</section>

Use block-level containers for larger content groups.

Inline Elements Can Be Inside Block-Level Elements

It is very common to place inline elements inside block-level elements.

For example:

1<p>2  Visit our <a href=”contact.html”>contact page</a> to get in touch.3</p>

The <p> is block-level.

The <a> is inline.

This is a normal and useful pattern.

Another example:

1<h1>Learn <span class=”highlight”>HTML</span> Today</h1>

The <h1> is block-level.

The <span> is inline.

The span allows part of the heading text to be targeted with CSS.

Lists and Block Behaviour

Lists are useful examples of block-level behaviour.

For example:

1<ul>2  <li>HTML</li>3  <li>CSS</li>4  <li>JavaScript</li>5</ul>

The <ul> element creates a block.

Each <li> element creates a list item inside that block.

The list items appear one after another, usually on separate lines.

Each list item can contain inline elements:

1<ul>2  <li>Learn <strong>HTML</strong></li>3  <li>Practise <em>CSS</em></li>4  <li>Build a <a href=”project.html”>small project</a></li>5</ul>

This shows block and inline elements working together.

Images and Inline Behaviour

The <img> element behaves like an inline element by default.

For example:

1<p>2  Here is our logo:3  <img src=”images/logo.png” alt=”Company logo”>4</p>

The image can sit within a line of text.

However, images are often styled with CSS to behave more like blocks in layouts:

1img {2  display: block;3  max-width: 100%;4  height: auto;5}

This can make images easier to position and prevent unwanted gaps around them.

The important point is that default behaviour can be changed with CSS.

CSS Can Change Display Behaviour

HTML elements have default display behaviour, but CSS can change it.

For example, links are inline by default:

1<a href=”index.html”>Home</a>2<a href=”about.html”>About</a>3<a href=”contact.html”>Contact</a>

They usually sit on the same line if there is enough space.

CSS can make them behave like blocks:

1a {2  display: block;3}

Now each link starts on a new line.

A block-level element can also be made inline:

1li {2  display: inline;3}

This can make list items appear beside each other.

However, beginners should first understand the default behaviour before changing it with CSS.

The display Property

The CSS display property controls how an element behaves in layout.

Common values include:

1display: block;

1display: inline;

1display: inline-block;

1display: flex;

1display: grid;

For this article, the most important values are block and inline.

Example:

1.highlight-box {2  display: block;3}

Example:

1.highlight-word {2  display: inline;3}

CSS layout becomes much easier once you understand that HTML elements have default display behaviour.

What Is Inline-Block?

You may also see inline-block.

An inline-block element stays in the line like an inline element, but it can accept width, height, padding, and margins more like a block.

For example:

1<a class=”button-link” href=”contact.html”>Contact Us</a>

1.button-link {2  display: inline-block;3  padding: 10px 16px;4}

The link still sits inline with surrounding content, but it can be styled like a button.

This is useful for buttons, badges, labels, and small UI components.

Margins and Padding Behave Differently

Block and inline elements can behave differently when you add spacing with CSS.

For block-level elements, margins and padding usually behave in an intuitive way.

For example:

1p {2  margin-bottom: 20px;3}

This creates space below each paragraph.

Inline elements can also have padding and margins, but vertical spacing may not behave the way beginners expect.

For example:

1span {2  margin-top: 20px;3}

This may not create vertical spacing in the same way a block element would.

If you need a small inline element to have more box-like spacing, inline-block may be useful.

Choosing the Right Element

Do not choose elements only because of their default block or inline appearance.

Choose elements based on meaning first.

For example, if something is a paragraph, use <p>:

1<p>This is a paragraph.</p>

Do not use a <div> just because it creates a block:

1<div>This is a paragraph.</div>

If something is a link, use <a>:

1<a href=”contact.html”>Contact Us</a>

Do not use a <span> and make it look clickable.

HTML should describe meaning.

CSS should control appearance.

Common Mistake: Using <br> Instead of Block Elements

Beginners sometimes use repeated line breaks to create block spacing.

Avoid this:

1About Us<br><br>2We create websites for small businesses.<br><br>3Contact us today.

Better:

1<h2>About Us</h2>2 3<p>We create websites for small businesses.</p>4 5<p>Contact us today.</p>

The second version uses meaningful block-level elements.

Use <br> only when the line break is part of the content, such as in an address or poem.

Do not use <br> to fake layout spacing.

Common Mistake: Using Span for Large Blocks

A <span> should not be used for large sections of content.

Incorrect:

1<span class=”card”>2  <h2>Website Design</h2>3  <p>Simple websites for small businesses.</p>4</span>

Better:

1<div class=”card”>2  <h2>Website Design</h2>3  <p>Simple websites for small businesses.</p>4</div>

Better still, if the card is a standalone content item:

1<article class=”card”>2  <h2>Website Design</h2>3  <p>Simple websites for small businesses.</p>4</article>

Use inline elements for inline content.

Use block-level elements for larger groups.

Common Mistake: Using Div for Everything

Another common mistake is using <div> for all page structure.

Less meaningful:

1<div class=”header”>My Website</div>2<div class=”nav”>Home About Contact</div>3<div class=”main”>Welcome to the page.</div>4<div class=”footer”>Copyright 2026</div>

Better:

1<header>2  <h1>My Website</h1>3</header>4 5<nav>6  <a href=”index.html”>Home</a>7  <a href=”about.html”>About</a>8  <a href=”contact.html”>Contact</a>9</nav>10 11<main>12  <p>Welcome to the page.</p>13</main>14 15<footer>16  <p>© 2026 My Website</p>17</footer>

Many semantic elements are block-level by default, but they also describe the structure more clearly.

Common Mistake: Expecting Inline Elements to Create New Lines

Inline elements do not usually create new lines.

For example:

1<span>First span</span>2<span>Second span</span>3<span>Third span</span>

These may appear on the same line.

If you want separate blocks, use block-level elements:

1<div>First block</div>2<div>Second block</div>3<div>Third block</div>

Or use CSS to change the display behaviour.

A Complete Example

Here is a simple HTML page showing block-level and inline elements together:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Block and Inline Example</title>6</head>7<body>8 9  <header>10    <h1>Learning HTML Layout Behaviour</h1>11  </header>12 13  <main>14    <section>15      <h2>Block-Level Elements</h2>16 17      <p>Paragraphs are block-level elements. They start on a new line by default.</p>18 19      <div class=”card”>20        <h3>Example Card</h3>21        <p>This card is grouped using a div.</p>22      </div>23    </section>24 25    <section>26      <h2>Inline Elements</h2>27 28      <p>29        Inline elements, such as <strong>strong</strong>,30        <em>emphasis</em>, and31        <a href=”links.html”>links</a>,32        stay within the line of text.33      </p>34 35      <p>36        A <span class=”highlight”>span</span> can target a small part of a sentence.37      </p>38    </section>39  </main>40 41  <footer>42    <p>© 2026 Web Basics</p>43  </footer>44 45</body>46</html>

This example uses:

1<header>

1<main>

1<section>

1<p>

and:

1<div>

as block-level elements.

It also uses:

1<strong>

1<em>

1<a>

and:

1<span>

as inline elements.

Best Practices

Choose HTML elements based on meaning first.

Use block-level elements for larger structures and content groups.

Use inline elements for small parts of text inside a line.

Use <div> for generic block containers when no more meaningful element fits.

Use <span> for generic inline containers when no more meaningful element fits.

Do not use <br> to create layout spacing.

Do not use <span> for large content blocks.

Do not use <div> for everything when semantic elements would be clearer.

Use CSS to control layout and appearance.

Learn the default behaviour before changing it with CSS.

Summary

HTML elements behave differently on the page.

Block-level elements usually start on a new line and take up the available width:

1<p>This is a paragraph.</p>2<div>This is a div.</div>3<section>This is a section.</section>

Inline elements stay within the flow of text:

1<p>This is <strong>important</strong> text with a <a href=”page.html”>link</a>.</p>

The <div> element is a generic block container.

The <span> element is a generic inline container.

Block-level and inline behaviour affects how elements appear by default, but CSS can change that behaviour using the display property.

Understanding this difference makes HTML easier to predict, easier to style, and easier to structure correctly.