HTML Reference
<span> — The Inline Container
The inline counterpart to <div>. Styles a word or phrase without breaking the flow of text.
Last updated: October 2026
Definition: The <span> element is a generic inline container with no semantic meaning. It groups a portion of text for styling or JavaScript manipulation without introducing a line break.
🎬 Live Example
A span inside a paragraph highlights a word without breaking the line.
This is a regular paragraph. The word
highlighted
is wrapped in a <span> and turns yellow. Notice how the line
does not break around it.
💡 The span is inline — the surrounding text flows naturally around it. A <div> here would push the text to a new line.
Basic Syntax
<p>This is a <span class="highlight">highlighted</span> word.</p>The <span> has no attributes of its own — only global attributes.
⚙️ Global Attributes
Like <div>, <span> has no specific attributes. It uses the standard global attributes:
| Attribute | Purpose |
|---|---|
id | Unique identifier for CSS or JavaScript. |
class | One or more class names for styling. |
style | Inline CSS. |
data-* | Custom data attributes for JavaScript. |
title | Tooltip on hover. |
lang | Language of the content inside the span. |
aria-* | ARIA attributes for accessibility. |
Highlight a Word
The simplest use — style a specific word inside a paragraph.
<p>
The <span class="text-blue-500">quick</span> brown fox
jumps over the lazy dog.
</p>
<style>
.text-blue-500 { color: #3b82f6; font-weight: 700; }
</style>Price Highlighting
Common in e-commerce — style a price inline with the description.
<div class="product">
<h3>Wireless Headphones</h3>
<p>
Premium sound with active noise cancellation.
Now only <span class="price">$149</span> — down from $199!
</p>
</div>Language Tagging
Mark inline foreign words for screen readers and search engines.
<p>
The Spanish word for "hello" is
<span lang="es">hola</span>.
</p>Screen readers will pronounce "hola" with Spanish phonetics.
JavaScript Targeting
Use a span as a hook to update text dynamically.
<p>
Items in cart: <span id="cart-count">0</span>
</p>
<script>
const count = document.getElementById("cart-count");
let items = 0;
function addToCart() {
items++;
count.textContent = items;
}
</script>🎯 span vs div
The single most important distinction to know:
| Feature | <span> | <div> |
|---|---|---|
| Display | Inline | Block |
| Line break | No | Yes |
| Can hold block elements | No | Yes |
| Typical use | Styling a word or phrase | Layout containers |
| Common example | Highlight a word | Wrap a card |
💡 Rule of thumb: If it sits inside a paragraph, use <span>. If it wraps a block of content, use <div>.
🎯 Semantic Inline Alternatives
Before using <span>, check if a semantic inline element fits:
| If the content is... | Use this instead |
|---|---|
| Important / strong emphasis | <strong> |
| Emphasized (italic meaning) | <em> |
| Highlighted / marked | <mark> |
| Code snippet inline | <code> |
| Keyboard input | <kbd> |
| Abbreviation | <abbr> |
| Time / date | <time> |
| Nothing semantic fits | <span> |
⚠️ Common Mistakes
- Using
<span>to wrap block content. This produces invalid HTML and breaks layout. Use<div>or a semantic block element. - Using
<span>when a semantic element fits. For emphasis, use<strong>or<em>. For highlights, use<mark>. These have meaning; span does not. - Overusing
<span>for layout. Spans are inline. They cannot control layout. Use CSS Grid or Flexbox on block containers. - Confusing
<span>with<div>. The single most common HTML mistake. If it needs a line break, it's a div. - Relying on
<span>for accessibility. A span conveys no meaning to screen readers. Use ARIA or semantic elements if the content is meaningful. - Using a span as a button. It's not focusable, not keyboard accessible, and not announced as a button. Use
<button>.
♿ Accessibility Notes
<span>has no semantic meaning. Screen readers ignore it. This is fine for styling, but useless for conveying information.- Use
langfor foreign words. A span withlang="es"tells screen readers to use Spanish phonetics. - Never remove focus outlines from interactive spans. If you must make a span interactive (not recommended), keep it keyboard-focusable with
tabindex="0". - For emphasis, use
<strong>or<em>. These are announced by screen readers with emphasis. A styled span is not. - For highlights, use
<mark>. This is announced as highlighted content by assistive tech.
❓ Frequently Asked Questions
What is the HTML <span> tag?
The <span> tag is a generic inline container with no semantic meaning. It groups inline content for styling or JavaScript manipulation without breaking the flow of text.
What is the difference between <span> and <div>?
<span> is inline (flows with text, no line break). <div> is block-level (forces a line break). Use <span> for styling a word or phrase inside a paragraph. Use <div> for structural containers.
When should I use a <span>?
Use a <span> when you need to style or target part of a text line — a specific word, a number, or a phrase — without affecting the layout. It is ideal for inline styling and JavaScript hooks.
Can <span> contain block elements?
No. <span> is inline and cannot legally contain block-level elements like <div>, <p>, or <h1>. Doing so produces invalid HTML. Use <div> if you need to wrap block content.
Is <span> bad for SEO?
No. <span> is neutral for SEO. It does not convey meaning to search engines, but it does not hurt them either. Use it for styling or scripting. For meaning, use semantic elements like <strong>, <em>, or <mark>.