<span>

The span element is a generic inline container with no inherent meaning. It is used to group inline content — such as a portion of text — so that you can apply styles or manipulate it with scripts.

Syntax

<span>part of text</span>

<!-- Use class or id to apply CSS or JavaScript -->
<p>Price: <span class="price">$19.80</span></p>

Common Attributes

Attribute	Description
class	Specifies one or more CSS classes, separated by spaces.
id	Specifies a unique identifier for the element. Must not be duplicated on the same page.
style	Applies inline CSS styles directly to the element.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .price {
      color: red;
      font-weight: bold;
      font-size: 1.2em;
    }
    .highlight {
      background-color: yellow;
    }
    .badge {
      display: inline-block;
      background: #333;
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8em;
    }
  </style>
</head>
<body>

  <!-- Apply a color to part of the text -->
  <p>Special price: <span class="price">$9.80</span> (tax included)</p>

  <!-- Highlight part of the text -->
  <p>This feature was added in the <span class="highlight">latest version</span>.</p>

  <!-- Badge label -->
  <p>JavaScript <span class="badge">ES2023</span></p>

</body>
</html>

Output

Because span is an inline element, styles are applied only to the targeted portion without breaking the flow of surrounding text.

Special price: $9.80 (tax included)  ← "$9.80" is displayed in red, bold, and larger
This feature was added in the latest version.  ← "latest version" is highlighted in yellow
JavaScript ES2023  ← "ES2023" appears as a small badge with a dark background

Overview

The span element is the inline counterpart of div. While div is a generic block-level container, span is a generic inline container. It is useful when you want to style or manipulate just a portion of text without disrupting the surrounding content flow.

The span element has no visual style or semantic meaning on its own. It only becomes useful when combined with CSS or the class attribute. Common use cases include coloring part of a sentence, making a specific word bold, or dynamically updating a string with JavaScript.

Prefer semantic elements when the content has a specific meaning. For emphasis, use strong or em; for code snippets, use code. Reserve span for generic cases where no appropriate semantic element exists.