<span>
The <span> element is a generic inline container for phrasing content. It has no inherent meaning and is used primarily for styling purposes or to group inline elements for scripting or CSS targeting.
This page was last updated on 2025-11-27
Syntax
<span>inline content</span>
Attributes
- class - CSS class name (most common use)
- id - Unique identifier
- style - Inline CSS styles
- title - Advisory information (tooltip)
- lang - Language of the content
- dir - Text direction (ltr or rtl)
Examples
Styling specific text:
<p>The price is <span class="price">$29.99</span> per item.</p>
Highlighting text with inline styles:
<p>This word is <span style="color: red;">important</span>.</p>
Grouping for JavaScript:
<p>Your score: <span id="score">0</span> points</p>
Multiple classes:
<p>Status: <span class="status active">Online</span></p>
When to Use
Use <span> when you need to apply styling or scripting to a portion of inline text and no other semantic element is appropriate. It is the inline equivalent of <div> - a generic container with no inherent meaning.
Prefer semantic elements when they fit: use <strong> for important text, <em> for emphasis, <code> for code, <cite> for citations. Only use <span> when these semantic alternatives do not apply to your use case.
