The HTML <span> element is an inline container used to group a small portion of text or other inline content. It is commonly used to apply CSS styles to specific words, highlight text, or target part of a sentence with JavaScript.

Unlike the <div> element, which normally starts on a new line, the <span> element normally remains within the current line of text. It does not add any special meaning or visual styling by itself.

For example, you can use <span> to change the color of a word, highlight a price, emphasize a status, or style a specific phrase within a paragraph.

In this tutorial, you will learn how the HTML <span> element works, how to style it with CSS, and how to use it in practical examples.

What Is the HTML Span Element?

The HTML <span> element is a generic inline container that allows you to group part of your content without creating a new block.

It is useful when you want to apply styles or functionality to a specific portion of text rather than an entire paragraph or section.

Here is a simple example:

<p>
  Learn <span style="color: blue;">HTML</span> to build webpages.
</p>

In this example, the <span> element changes the color of the word “HTML” to blue. The remaining text keeps its normal styling.

The <span> element does not have a special semantic meaning. Use semantic elements such as <strong> or <em> when they better describe the purpose of the content.

HTML Span Element Syntax

The <span> element has an opening tag and a closing tag. The content you want to group is placed between them.

<span>Content goes here</span>

You can place a <span> inside paragraphs, headings, links, list items, and other elements that allow inline content.

For example:

<p>
  Welcome to <span>Web4Learners</span>, your web development learning platform.
</p>

The span groups the word “Web4Learners” without creating a separate line.

HTML Span Element Example

The following example demonstrates how to use the <span> element to style selected words in a paragraph.

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>HTML Span Element</title> <style> .highlight { color: #0878d1; font-weight: bold; } </style> </head> <body> <h1>HTML Span Element</h1> <p> Learn <span class=”highlight”>HTML and CSS</span> to create attractive webpages. </p> </body> </html>

In this example, the highlight class changes the color and weight of the selected text. The rest of the paragraph remains unchanged.

HTML Span Element with CSS

CSS allows you to customize the appearance of content inside a <span> element. You can change its color, font size, background, font weight, and other text properties.

<style>
  .styled-text {
    color: #0878d1;
    font-size: 20px;
    font-weight: bold;
    background-color: #eaf4ff;
  }
</style>

<p>
  Learn <span class="styled-text">HTML programming</span> step by step.
</p>

In this example:

• color changes the text color.
• font-size changes the text size.
• font-weight makes the text bold.
• background-color adds a background behind the text.

The styles apply only to the text inside the span.

HTML Span Element with Background Color

You can use the CSS background-color property to highlight a word or phrase.

<style>
  .highlight {
    background-color: yellow;
  }
</style>

<p>
  HTML is used to <span class="highlight">structure webpages</span>.
</p>

The background color appears behind the selected phrase without changing the layout of the paragraph into a separate block.

This technique is useful for highlighting important terms, search results, or selected text.

HTML Span Element with Different Text Colors

You can use multiple <span> elements in the same paragraph to apply different colors to individual words or phrases.

<style>
  .html {
    color: #e34f26;
  }

  .css {
    color: #1572b6;
  }

  .javascript {
    color: #b8860b;
  }
</style>

<p>
  Learn <span class="html">HTML</span>,
  <span class="css">CSS</span>, and
  <span class="javascript">JavaScript</span>.
</p>

Each span uses a different CSS class, allowing you to style the three technology names independently.

HTML Span Element Inside a Heading

The <span> element can also be used inside headings to style only part of a heading.

<style>
  .heading-highlight {
    color: #0878d1;
  }
</style>

<h1>
  Welcome to <span class="heading-highlight">Web4Learners</span>
</h1>

In this example, only the word “Web4Learners” receives the blue text color. The heading remains a single heading element.

This approach is useful for branded text, highlighted keywords, and headings with different text colors.

HTML Span Element for Displaying Status

The <span> element can be used to style short status labels, such as availability, order status, or account status.

<style>
  .status {
    color: #18733b;
    background-color: #e5f7eb;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
  }
</style>

<p>
  Product Availability:
  <span class="status">In Stock</span>
</p>

The span styles the words “In Stock” as a small status label.

If the status communicates important information, make sure it is understandable from the text itself and not from color alone.

HTML Span Element with JavaScript

JavaScript can use the <span> element to update a specific part of a webpage without replacing the entire paragraph.

For example, you can update a message or display a changing value.

<p>
  Current Status: <span id="status">Waiting</span>
</p>

<button type="button" onclick="changeStatus()">Update Status</button>

<script>
  function changeStatus() {
    document.getElementById("status").textContent = "Completed";
  }
</script>

When the button is clicked, JavaScript changes the span’s text from “Waiting” to “Completed”.

The rest of the paragraph remains unchanged.

Difference Between HTML Span and Div Elements

The <span> and <div> elements are both generic containers, but they have different default display behaviors.

Feature	<span> Element	<div> Element
Default display	inline	block
New line	Normally stays within the current line	Normally starts on a new line
Common use	Groups words or phrases	Groups larger sections of content
Width	Usually fits its content	Normally fills the available width
Typical example	Styling a word inside a sentence	Grouping a heading and paragraph

Example:

<div>
  <h2>HTML Tutorial</h2>
  <p>Learn HTML step by step.</p>
</div>

<p>
  Learn <span style="color: blue;">HTML</span> today.
</p>

The <div> groups a heading and paragraph, while the <span> styles a word inside a paragraph.

Learn more in our <a href=”https://web4learners.com/blogs/html-div/“>HTML Div Element</a> tutorial.

Difference Between Span and Strong Elements

The <span> and <strong> elements serve different purposes.

The <span> element is a generic inline container without special semantic meaning. The <strong> element indicates that its content has strong importance.

<p>
  <span style="color: blue;">HTML</span> is a markup language.
</p>

<p>
  <strong>Important:</strong> Save your work regularly.
</p>

In the first example, the span is used for styling. In the second example, the strong element communicates importance.

Choose the element based on the meaning of the content, not just its default appearance.