<span>

Since:		HTML 4(1997)

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

sample_span.html

View sample page

<!-- 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>

<!-- Using span as a JavaScript target for dynamic updates -->
<p>Current time: <span id="clock"></span></p>
<script>
  document.getElementById('clock').textContent = new Date().toLocaleTimeString();
</script>

<!-- Applying inline style to only part of the text -->
<p>Error: <span style="color: red; font-weight: bold;">404 Not Found</span></p>

<!-- Separating a value and its unit for independent styling -->
<p>Download speed: <span class="value">128</span><span class="unit">Mbps</span></p>

Output

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

View sample page

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.

When the content has a specific meaning, it is common practice to prefer semantic elements. For emphasis, use strong or em; for code snippets, use code. Reserve span for generic cases where no appropriate semantic element exists.

Common Mistakes

Using span instead of a semantic element

When content has a specific meaning — emphasis, a code snippet, a citation — using span with inline styles instead of the appropriate semantic element means that screen readers and search engines miss the intended meaning.

<p><span style="font-weight: bold;">Important notice</span></p>
<p>Example: <span style="font-family: monospace;">console.log()</span></p>

The following example shows how this works in practice:

<p><strong>Important notice</strong></p>
<p>Example: <code>console.log()</code></p>

Wrapping block elements inside span

span is an inline element, so placing block-level elements such as div or p inside it is invalid HTML. For grouping block-level elements, use div instead.

<span><div>Block</div></span>

<span>Inline <strong>text</strong></span>

Integration with JavaScript

By adding id or class attributes to <span>, JavaScript can dynamically manipulate specific text ranges.

<!-- Countdown display -->
<p>Time remaining: <span id="count">10</span> seconds</p>

<!-- Keyword highlight targets -->
<p>This site covers <span class="keyword">HTML</span> and <span class="keyword">CSS</span>.</p>

<script>
  // Update a specific span's text
  var countEl = document.getElementById('count');
  var count = 10;
  var timer = setInterval(function() {
    count--;
    countEl.textContent = count;
    if (count <= 0) {
      clearInterval(timer);
      countEl.textContent = 'Done';
    }
  }, 1000);

  // Get all spans with a class name and change their style
  var keywords = document.querySelectorAll('.keyword');
  for (var i = 0; i < keywords.length; i++) {
    keywords[i].style.backgroundColor = '#fff3cd';
    keywords[i].style.padding = '0 2px';
    keywords[i].style.borderRadius = '3px';
  }
</script>

You can also toggle classes in response to user interactions to dynamically update styles.

<span class="status" id="statusBadge">Offline</span>
<button id="toggleBtn">Toggle</button>

<script>
  var badge = document.getElementById('statusBadge');
  var btn = document.getElementById('toggleBtn');

  btn.addEventListener('click', function() {
    // classList.toggle switches a class on and off
    badge.classList.toggle('online');
    badge.textContent = badge.classList.contains('online') ? 'Online' : 'Offline';
  });
</script>

<style>
  .status { padding: 2px 8px; border-radius: 4px; background: #ccc; }
  .status.online { background: #4caf50; color: white; }
</style>