- The Generic Inline Container

The `` Element

Inline HTML 3.2

The span element is a generic inline container for phrasing content. It has no semantic meaning on its own and is used for styling purposes or as a hook for JavaScript.

Quick Example

<p>The word <span class="highlight">highlight</span> stands out.</p>
<p>Price: <span class="price">$99.99</span></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The word <span class="highlight">highlight</span> stands out.</p>
<p>Price: <span class="price">$99.99</span></p>

Syntax

<span>inline content</span>

The  element is purely a container with no inherent meaning.

When to Use ``

Use  when you need to:

Apply CSS styling to part of inline content
Target specific text with JavaScript
Group inline elements for manipulation
No appropriate semantic element exists

Common Use Cases

Styling Specific Text

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<p>This is <span class="red">red text</span> and this is <span class="bold">bold text</span>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<p>This is <span class="red">red text</span> and this is <span class="bold">bold text</span>.</p>

Highlighting Keywords

<style>
.keyword {
  background: yellow;
  padding: 2px 4px;
  border-radius: 2px;
}
</style>

<p>Search results for <span class="keyword">HTML</span> elements.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.keyword {
  background: yellow;
  padding: 2px 4px;
  border-radius: 2px;
}
</style>

<p>Search results for <span class="keyword">HTML</span> elements.</p>

Multi-Color Text

<style>
.rainbow span:nth-child(1) { color: red; }
.rainbow span:nth-child(2) { color: orange; }
.rainbow span:nth-child(3) { color: yellow; }
.rainbow span:nth-child(4) { color: green; }
.rainbow span:nth-child(5) { color: blue; }
</style>

<p class="rainbow">
<span>R</span><span>a</span><span>i</span><span>n</span><span>b</span>ow
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.rainbow span:nth-child(1) { color: red; }
.rainbow span:nth-child(2) { color: orange; }
.rainbow span:nth-child(3) { color: yellow; }
.rainbow span:nth-child(4) { color: green; }
.rainbow span:nth-child(5) { color: blue; }
</style>

<p class="rainbow">
<span>R</span><span>a</span><span>i</span><span>n</span><span>b</span>ow
</p>

Icon with Text

<style>
.icon::before {
  content: '⭐ ';
  color: gold;
}
</style>

<p>Rating: <span class="icon">5 out of 5</span></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.icon::before {
  content: '⭐ ';
  color: gold;
}
</style>

<p>Rating: <span class="icon">5 out of 5</span></p>

JavaScript Hooks

<p>Click count: <span id="counter">0</span></p>
<button onclick="increment()">Click me</button>

<script>
let count = 0;
function increment() {
count++;
document.getElementById('counter').textContent = count;
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Click count: <span id="counter">0</span></p>
<button onclick="increment()">Click me</button>

<script>
let count = 0;
function increment() {
count++;
document.getElementById('counter').textContent = count;
}
</script>

Data Attributes

<p>
Temperature:
<span data-unit="celsius" data-value="25">25°C</span>
</p>

<button onclick="convert()">Convert to Fahrenheit</button>

<script>
function convert() {
const temp = document.querySelector('[data-unit]');
const celsius = parseFloat(temp.dataset.value);
const fahrenheit = (celsius * 9/5) + 32;
temp.textContent = fahrenheit.toFixed(1) + '°F';
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Temperature:
<span data-unit="celsius" data-value="25">25°C</span>
</p>

<button onclick="convert()">Convert to Fahrenheit</button>

<script>
function convert() {
const temp = document.querySelector('[data-unit]');
const celsius = parseFloat(temp.dataset.value);
const fahrenheit = (celsius * 9/5) + 32;
temp.textContent = fahrenheit.toFixed(1) + '°F';
}
</script>

When NOT to Use ``

<!-- Don't use span for emphasis -->
<p>This is <span class="important">very important</span>.</p>

<!-- Don't use span for code -->
<p>Use the <span class="code">console.log()</span> function.</p>

<!-- Use semantic elements -->
<p>This is <strong>very important</strong>.</p>

<!-- Use code element -->
<p>Use the <code>console.log()</code> function.</p>

Semantic Elements to Consider First

Instead of `<span>`	Use
Emphasized text	`<em>` or `<strong>`
Code snippets	`<code>`
Keyboard input	`<kbd>`
Sample output	`<samp>`
Variables	`<var>`
Abbreviations	`<abbr>`
Citations	`<cite>`
Definitions	`<dfn>`
Time/dates	`<time>`
Quotations	`<q>`

Real-World Examples

Badge Components

<style>
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}
.badge-primary { background: #007bff; color: white; }
.badge-success { background: #28a745; color: white; }
.badge-warning { background: #ffc107; color: black; }
</style>

<p>Status: <span class="badge badge-success">Active</span></p>
<p>Priority: <span class="badge badge-warning">Medium</span></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}
.badge-primary { background: #007bff; color: white; }
.badge-success { background: #28a745; color: white; }
.badge-warning { background: #ffc107; color: black; }
</style>

<p>Status: <span class="badge badge-success">Active</span></p>
<p>Priority: <span class="badge badge-warning">Medium</span></p>

Tooltip Trigger

<style>
.tooltip {
  position: relative;
  border-bottom: 1px dotted #999;
  cursor: help;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.9em;
}
</style>

<p>
Hover over
<span class="tooltip" data-tooltip="This is a tooltip">
  this text
</span>
to see more.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.tooltip {
  position: relative;
  border-bottom: 1px dotted #999;
  cursor: help;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.9em;
}
</style>

<p>
Hover over
<span class="tooltip" data-tooltip="This is a tooltip">
  this text
</span>
to see more.
</p>

Dynamic Content

<p>
Welcome back, <span id="username">Guest</span>!
</p>

<button onclick="login()">Log In</button>

<script>
function login() {
document.getElementById('username').textContent = 'John Doe';
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Welcome back, <span id="username">Guest</span>!
</p>

<button onclick="login()">Log In</button>

<script>
function login() {
document.getElementById('username').textContent = 'John Doe';
}
</script>

Formatted Numbers

<style>
.currency {
  font-weight: 600;
  color: #28a745;
}
.decimal {
  font-size: 0.8em;
}
</style>

<p>
Total: <span class="currency">$99<span class="decimal">.99</span></span>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.currency {
  font-weight: 600;
  color: #28a745;
}
.decimal {
  font-size: 0.8em;
}
</style>

<p>
Total: <span class="currency">$99<span class="decimal">.99</span></span>
</p>

Styling Patterns

Inline Notification

<style>
.notification {
  background: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}
</style>

<p>You have <span class="notification">3 new messages</span> waiting.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.notification {
  background: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}
</style>

<p>You have <span class="notification">3 new messages</span> waiting.</p>

Tag Labels

<style>
.tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 3px 10px;
  margin: 2px;
  border-radius: 3px;
  font-size: 0.85em;
}
</style>

<p>Topics:
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 3px 10px;
  margin: 2px;
  border-radius: 3px;
  font-size: 0.85em;
}
</style>

<p>Topics:
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</p>

Accessibility

No Semantic Meaning

Remember that  has no semantic meaning for screen readers. Add ARIA attributes when necessary:

<!-- Add role and label when needed -->
<span role="status" aria-live="polite" id="status">
  Loading...
</span>

Prefer Semantic Elements

Poor Accessibility
Better Accessibility

<p>Error: <span style="color: red;">Invalid input</span></p>

<p><strong>Error:</strong> Invalid input</p>
<!-- or -->
<p role="alert">Error: Invalid input</p>

Don’t Use for Structure

Wrong
Right

<span>Heading</span>
<span>This is a paragraph</span>

<h2>Heading</h2>
<p>This is a paragraph</p>

`` vs `<div>`

<div>

<!-- Inline container -->
<p>This is <span class="highlight">inline</span> content.</p>

Doesn’t break line flow.

<!-- Block container -->
<div class="section">
  <p>This is block content.</p>
</div>

Creates a block-level container.

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers.

Generic block-level container. Learn more →

Semantic Elements

Always prefer semantic elements when available. View all elements →

<span> - The Generic Inline Container

The `<span>` Element

Quick Example

Syntax

When to Use `<span>`

Common Use Cases

Styling Specific Text

Highlighting Keywords

Multi-Color Text

Icon with Text

JavaScript Hooks

Data Attributes

When NOT to Use `<span>`

Use Semantic Alternatives

Semantic Elements to Consider First

Real-World Examples

Badge Components

Tooltip Trigger

Dynamic Content

Formatted Numbers

Styling Patterns

Inline Notification

Tag Labels

Accessibility

No Semantic Meaning

Prefer Semantic Elements

Don’t Use for Structure

`<span>` vs `<div>`

Browser Support

Specifications

<span> - The Generic Inline Container

The <span> Element

Quick Example

Syntax

When to Use <span>

Common Use Cases

Styling Specific Text

Highlighting Keywords

Multi-Color Text

Icon with Text

JavaScript Hooks

Data Attributes

When NOT to Use <span>

Use Semantic Alternatives

Semantic Elements to Consider First

Real-World Examples

Badge Components

Tooltip Trigger

Dynamic Content

Formatted Numbers

Styling Patterns

Inline Notification

Tag Labels

Accessibility

No Semantic Meaning

Prefer Semantic Elements

Don’t Use for Structure

<span> vs <div>

Browser Support

Related Elements

Specifications

The `<span>` Element

When to Use `<span>`

When NOT to Use `<span>`

`<span>` vs `<div>`