When to Use Div and Span in HTML

Introduction

HTML includes many elements that describe specific types of content. For example, headings use <h1> to <h6>, paragraphs use <p>, navigation areas use <nav>, and main content areas use <main>.

Sometimes, however, you need a container that does not add any special meaning. That is where <div> and <span> are useful.

The <div> element is a generic block container.

The <span> element is a generic inline container.

They are both useful, but they should be used carefully. If a more meaningful HTML element fits, use that instead.

What Are Generic Containers?

A generic container is an element that groups content without saying much about what the content means.

For example:

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

The <div> groups the heading and paragraph together, but it does not tell the browser that the content is a section, article, navigation area, header, footer, or anything more specific.

A <span> works in a similar way, but it is used inside a line of text:

1<p>Our most popular package is <span>Website Starter</span>.</p>

The <span> groups the words “Website Starter”, but it does not give them any special meaning by itself.

The Difference Between <div> and <span>

The main difference is how they behave in the page layout.

A <div> is a block-level container.

A <span> is an inline container.

This means a <div> usually starts on a new line and takes up the full available width by default.

A <span> stays within the flow of the text and does not start a new line by default.

Example using <div>:

1<div>This is the first div.</div>2<div>This is the second div.</div>

These usually appear as separate blocks.

Example using <span>:

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

The span stays inside the sentence.

What Is a <div>?

The <div> element is a generic block-level container.

The name div comes from “division”.

It is commonly used to group larger parts of a page, especially when you need a container for CSS or JavaScript.

For example:

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

In this example, the <div> groups the heading and paragraph into a card.

The class attribute gives CSS a way to style the card.

1.card {2  border: 1px solid #ddd;3  padding: 20px;4}

The <div> itself does not mean “card”. The meaning comes from the content and the class name.

When to Use <div>

Use <div> when you need a block-level wrapper and no more specific semantic element fits.

Common uses include:

1layout wrappers2cards3grid items4containers for CSS styling5containers for JavaScript behaviour6groups of elements that do not form a semantic section

For example:

1<div class=”page-wrapper”>2  <header>3    <h1>My Website</h1>4  </header>5 6  <main>7    <p>This is the main content.</p>8  </main>9</div>

The <div class="page-wrapper"> exists mainly to help with layout.

It does not need to describe a meaningful section of content, so <div> is reasonable.

When Not to Use <div>

Do not use <div> when a more meaningful element would be better.

Less meaningful:

1<div class=”nav”>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</div>

Better:

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

The second version is better because the content is navigation, and <nav> describes that purpose.

Another example:

Less meaningful:

1<div class=”footer”>2  <p>© 2026 My Website</p>3</div>

Better:

1<footer>2  <p>© 2026 My Website</p>3</footer>

If the content is footer content, use <footer>.

What Is a <span>?

The <span> element is a generic inline container.

It is used to wrap a small part of text or inline content without creating a new block.

For example:

1<p>Save <span class=”highlight”>20%</span> when you book today.</p>

The <span> wraps “20%” so it can be styled separately.

CSS might look like this:

1.highlight {2  font-weight: bold;3}

The sentence stays as one paragraph, but the selected text can be styled or targeted.

When to Use <span>

Use <span> when you need to target part of a line of text and no more meaningful inline element fits.

Common uses include:

1styling one word or phrase2marking part of text for JavaScript3wrapping icons or labels inside text4applying a class to inline content

For example:

1<p>Your order status is <span class=”status”>Processing</span>.</p>

The span allows the word “Processing” to be styled or updated with JavaScript.

Another example:

1<p>Total: <span class=”price”>£29.99</span></p>

The price can now be targeted with CSS or JavaScript.

When Not to Use <span>

Do not use <span> when a more meaningful inline element fits.

For example, if text is important, use <strong>:

Less meaningful:

1<p><span class=”bold”>Warning:</span> Save your work before closing the page.</p>

Better:

1<p><strong>Warning:</strong> Save your work before closing the page.</p>

The <strong> element means the text is important.

The <span> only groups the text without adding meaning.

If text should be emphasised, use <em>:

Less meaningful:

1<p>You should <span class=”italic”>not</span> use headings only for size.</p>

Better:

1<p>You should <em>not</em> use headings only for size.</p>

The <em> element adds emphasis. The <span> only provides a styling hook.

Block vs Inline Behaviour

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

An inline element stays within the current line of text.

For example:

1<p>Before the div.</p>2<div>This is a div.</div>3<p>After the div.</p>

The <div> appears as its own block.

Now compare that with a span:

1<p>This sentence contains a <span>span element</span> inside it.</p>

The span stays inside the sentence.

This is why <div> is useful for grouping larger layout areas, while <span> is useful for small parts of text.

Using <div> for Layout

A common use of <div> is to create layout wrappers.

For example:

1<div class=”container”>2  <main>3    <h1>Welcome</h1>4    <p>This is the main content.</p>5  </main>6</div>

The <div class="container"> can be used to control the page width:

1.container {2  max-width: 1000px;3  margin: 0 auto;4  padding: 24px;5}

The <main> element gives semantic meaning.

The <div> helps with layout.

This is a good combination because each element has a clear job.

Using <div> for Cards

Cards are common in web design.

A card may be a visual layout pattern rather than a specific semantic structure.

For example:

1<div class=”card”>2  <img src=”images/service.jpg” alt=”Laptop on a desk”>3  <h2>Website Design</h2>4  <p>Simple websites for small businesses.</p>5  <a href=”services.html”>Learn more</a>6</div>

This may be acceptable if the card is mainly a layout component.

However, if the card represents a standalone article, product, or tutorial, a more meaningful element may be better.

For example:

1<article class=”card”>2  <h2>How to Use the Main Element in HTML</h2>3  <p>Learn how to mark the main content of a page.</p>4  <a href=”main-element.html”>Read article</a>5</article>

Here, <article> is better because the card is a standalone content item.

Using <span> for Small Styling Changes

The <span> element is useful when you need to style a small part of text.

For example:

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

CSS:

1.price {2  font-weight: bold;3}

Another example:

1<p>This course is <span class=”badge”>New</span>.</p>

CSS:

1.badge {2  padding: 4px 8px;3  border-radius: 4px;4}

The span allows the badge text to be styled without creating a new block.

Using <span> with JavaScript

The <span> element is often used when JavaScript needs to update part of a sentence.

For example:

1<p>You have <span id=”message-count”>3</span> new messages.</p>

JavaScript could later update the number inside the span.

The sentence structure stays intact, while the value can change.

You do not need to understand JavaScript to use <span>, but this is one common reason developers use it.

Div and Span Do Not Add Meaning

The most important thing to remember is that <div> and <span> do not add much semantic meaning.

They are useful containers, but they do not describe the content in the way that elements like <header>, <nav>, <main>, <section>, <article>, <aside>, or <footer> do.

For example:

1<div class=”main”>2  <h1>About Us</h1>3</div>

This may work, but this is more meaningful:

1<main>2  <h1>About Us</h1>3</main>

Use semantic elements first when they fit.

Use <div> and <span> when you need generic containers.

Class and ID with Div and Span

The <div> and <span> elements are often used with class and id attributes.

For example:

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

The class can be reused on multiple elements:

1<div class=”card”>First card</div>2<div class=”card”>Second card</div>3<div class=”card”>Third card</div>

An id should be unique on the page:

1<span id=”total-price”>£49</span>

Use class when you want to style or select multiple elements.

Use id when you need to identify one specific element.

A Complete Example

Here is a simple page using <div> and <span> appropriately:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Div and Span Example</title>6</head>7<body>8 9  <header>10    <h1>Bright Web Studio</h1>11  </header>12 13  <main>14    <div class=”card”>15      <h2>Website Starter Package</h2>16      <p>Build a simple website from <span class=”price”>£499</span>.</p>17      <a href=”services.html”>Learn more</a>18    </div>19 20    <div class=”card”>21      <h2>Website Maintenance</h2>22      <p>Ongoing support from <span class=”price”>£49 per month</span>.</p>23      <a href=”maintenance.html”>Learn more</a>24    </div>25  </main>26 27  <footer>28    <p>© 2026 Bright Web Studio</p>29  </footer>30 31</body>32</html>

In this example:

The <header>, <main>, and <footer> elements describe the main page structure.

The <div class="card"> elements create generic card containers.

The <span class="price"> elements target small pieces of text inside paragraphs.

Each element has a sensible role.

Common Mistake: Using Too Many Divs

A common problem is using too many <div> elements when semantic elements would be better.

Less meaningful:

1<div class=”header”>2  <div class=”title”>My Website</div>3</div>4 5<div class=”nav”>6  <a href=”index.html”>Home</a>7  <a href=”about.html”>About</a>8</div>9 10<div class=”main”>11  <div class=”section”>12    <div class=”heading”>Welcome</div>13    <div class=”text”>This is the main content.</div>14  </div>15</div>

More meaningful:

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</nav>9 10<main>11  <section>12    <h2>Welcome</h2>13    <p>This is the main content.</p>14  </section>15</main>

The second version is easier to understand because the element names describe the structure.

Common Mistake: Using Span Instead of Meaningful Inline Elements

Do not use <span> when an element like <strong>, <em>, <code>, or <a> is more appropriate.

Less meaningful:

1<p><span class=”important”>Important:</span> Check your file paths carefully.</p>

Better:

1<p><strong>Important:</strong> Check your file paths carefully.</p>

Less meaningful:

1<p>Use the <span class=”code”>img</span> element for images.</p>

Better:

1<p>Use the <code>img</code> element for images.</p>

The more specific elements give the browser and users more information.

Common Mistake: Using Div as a Button or Link

A <div> should not be used as a fake button or fake link.

Less appropriate:

1<div class=”button”>Contact Us</div>

Better if it links to another page:

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

Better if it performs an action:

1<button class=”button”>Open menu</button>

Use the element that matches the purpose.

A link navigates somewhere.

A button performs an action.

A div is only a generic container.

Common Mistake: Using Div When Main, Section, or Article Fits

A <div> is not wrong by itself, but it should not replace meaningful elements.

Less meaningful:

1<div class=”article”>2  <h2>How to Add Images Using HTML</h2>3  <p>This tutorial explains the img element.</p>4</div>

Better if it is standalone content:

1<article>2  <h2>How to Add Images Using HTML</h2>3  <p>This tutorial explains the img element.</p>4</article>

Less meaningful:

1<div class=”main”>2  <h1>About Us</h1>3</div>

Better:

1<main>2  <h1>About Us</h1>3</main>

Choose the element that best describes the content.

Best Practices

Use semantic HTML elements first when they fit.

Use <div> for generic block-level containers.

Use <span> for generic inline containers.

Use <div> for layout wrappers, card containers, and grouping elements for CSS or JavaScript.

Use <span> for styling or targeting small parts of text.

Do not use <div> when <header>, <nav>, <main>, <section>, <article>, <aside>, or <footer> would be more meaningful.

Do not use <span> when <strong>, <em>, <code>, or <a> would be more meaningful.

Use class for reusable styling.

Use id for one unique element.

Use CSS to control appearance.

Use HTML to describe meaning and structure.

Summary

The <div> and <span> elements are generic containers.

Use <div> for block-level grouping:

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

Use <span> for inline grouping:

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

The <div> element is useful for layout wrappers and larger containers.

The <span> element is useful for small parts of text inside a line.

Neither element adds much meaning by itself.

Use semantic elements when they fit, and use <div> or <span> when you need a neutral container for styling, layout, or JavaScript.