Block vs Inline Elements, div and span

Block vs inline elements behave differently: block elements start on a new line and take the full width, inline elements sit inside text. Learn when to use div and span.

What is the difference between block and inline elements?

Every HTML element has a default way of showing on the page. The two most common are block and inline.

A block element starts on a new line and stretches across the full width available. Think of bricks stacked in a wall: each one takes its own row. Examples: <p>, <h1>, <ul>, <li>, <header>, <section>, <div>.

An inline element stays inside the line of text and is only as wide as its content. Think of a highlighter pen on a sentence: the words stay in place, but some get marked. Examples: <a>, <strong>, <em>, <code>, <img>, <span>.

<p>This is a paragraph. It is a block element.</p>
<p>This is another paragraph. It starts on a new line.</p>

<p>Inline elements like <strong>strong</strong>, <em>em</em> and <a href="#">links</a> stay in the same line as the text around them.</p>

In the browser, each paragraph appears on its own line with space around it. Inside the third paragraph, the bold word, the italic word and the link stay in the sentence. They do not break the line.

Note: Block and inline are only the default behaviour. With CSS you can change any element, for example with display: flex or display: inline-block. You'll learn this in the CSS course. Always choose the element for its meaning, not for how it looks.

div and span: generic containers

Sometimes no element fits your content. Then you use a generic container: an element with no meaning that just groups things together, like a plain cardboard box.

• <div> is a generic block container. Use it to group several elements, usually so you can style or position them with CSS.
• <span> is a generic inline container. Use it to mark a small part of text, usually to style it.

Neither one tells the browser anything about the content. They are useful hooks for CSS and JavaScript, often with a class attribute.

<div class="product-card">
  <img src="images/mug.jpg" alt="White ceramic coffee mug" width="300" height="300">
  <h2>Classic Coffee Mug</h2>
  <p>Price: <span class="price">£12.00</span></p>
  <p><span class="badge">New</span> Dishwasher safe and holds 350 ml.</p>
</div>

The <div> groups the image, heading and text into one card, so later CSS can give the card a border and shadow. The <span> elements mark the price and the "New" badge so they can get their own colour. Without CSS, you see a normal image, heading and two lines of text.

When should you use a semantic element instead of a div?

Use this simple rule: first look for a semantic element. Use <div> or <span> only if nothing fits.

• Is it the site header? Use <header>, not <div class="header">.
• Is it a menu? Use <nav>.
• Is it a blog post or card that stands alone? Use <article>.
• Is it important text? Use <strong>, not <span class="bold">.
• Is it just a wrapper for layout? Then <div> is the right choice.

Fixing "div soup": before and after

"Div soup" is a page built almost only with <div> elements. It works, but it has no meaning. Screen readers and search engines see one big pile of boxes.

Here is a "before" example of div soup:

<div class="header">
  <div class="logo">Bright Fitness</div>
  <div class="menu">
    <a href="/">Home</a>
    <a href="/classes">Classes</a>
    <a href="/join">Join</a>
  </div>
</div>
<div class="content">
  <div class="title">Our Classes</div>
  <div class="text">Yoga, spinning and strength training every day.</div>
</div>
<div class="footer">© 2026 Bright Fitness</div>

And here is the same page "after", with semantic elements:

<header>
  <p class="logo">Bright Fitness</p>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/classes">Classes</a>
    <a href="/join">Join</a>
  </nav>
</header>
<main>
  <h1>Our Classes</h1>
  <p>Yoga, spinning and strength training every day.</p>
</main>
<footer>
  <p>© 2026 Bright Fitness</p>
</footer>

Both versions look almost the same in the browser. But in the second one, "Our Classes" is a real heading, the menu is real navigation, and the main content is marked. Screen reader users can jump to the menu or main content in one key press, and search engines know what the page title is.

Common mistake: Using <div class="title"> instead of a heading like <h1> or <h2>. A div that looks big and bold is still not a heading. Screen reader users navigate by headings, so they would miss it.

Practice exercise

Take this div soup and rewrite it with the right elements: <div class="top"><div class="name">Sam's Bakery</div></div><div class="post"><div class="post-title">New sourdough bread!</div><div>Available from Monday.</div></div>. Keep a <span> for the word "Monday" so it can be highlighted later.

Hint: The bakery name sits in a header, the post is an article, the post title is a heading, and the text is a paragraph.

Key takeaways

• Block elements start on a new line and take the full width; inline elements stay inside the text.
• <div> is a generic block container and <span> is a generic inline container. Neither has meaning.
• Always look for a semantic element first; use <div> and <span> only for grouping and styling.
• Replacing div soup with semantic elements makes pages more accessible and easier to understand.