Syntax
<span>text content</span>Examples
Text Highlighting
Using span to highlight specific words within a paragraph with different colors.
<p>
This is a normal sentence with <span style="color: red; font-weight: bold;">important text</span> that needs emphasis.
You can also have <span style="background-color: yellow;">highlighted sections</span> within the same paragraph.
</p>Custom Styling
Applying multiple styles to inline text elements for visual variety.
<p>
The price is <span style="font-size: 24px; color: #28a745; font-weight: bold;">$49.99</span>
<span style="text-decoration: line-through; color: #888;">$79.99</span>
<span style="background: #ff0000; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">50% OFF</span>
</p>Icon with Text
Combining spans with emoji or symbols to create inline icon-text combinations.
<p>
<span style="color: #28a745; font-size: 20px;">âœ"</span>
<span style="font-weight: bold;">Available in stock</span>
<br>
<span style="color: #dc3545; font-size: 20px;">✗</span>
<span style="color: #888;">Out of stock</span>
</p>Data Attributes
Using spans with data attributes for dynamic content or JavaScript manipulation.
<p>
Welcome back, <span id="username" style="font-weight: bold; color: #007bff;">Guest</span>!
You have <span data-count="5" style="background: #ff6b6b; color: white; padding: 2px 8px; border-radius: 50%; font-size: 12px; font-weight: bold;">5</span> new messages.
</p>Attributes
- id (string): Unique identifier for the span element
- class (string): CSS class names for styling
- style (string): Inline CSS styles
- data-* (string): Custom data attributes for storing information
Best practices
- Use <span> only for styling inline content - don't use it for layout structure
- Prefer semantic elements like <strong>, <em>, <mark> when they fit the meaning
- Keep inline styles minimal - use CSS classes for reusable styles
- Use spans for wrapping individual words or short phrases, not entire paragraphs
- Add meaningful class names that describe the purpose, not the appearance
- Avoid nesting multiple spans unnecessarily - keep your markup clean and simple
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<span>
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
id
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 32 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 32 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 32
- From 1 · Removed in 32 · Last supported version: 31 · Partial implementation · id is a true global attribute only since Firefox 32.
Safari
- From 1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 32
- From 4 · Removed in 32 · Last supported version: 31 · Partial implementation · id is a true global attribute only since Firefox for Android 32.
Samsung Internet
- From 1.0
class
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
By 4 (possibly earlier) - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
By 3.2 (possibly earlier) - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- By 4 (possibly earlier)
Edge
- From 12
Opera
- From 15
Safari on iOS
- By 3.2 (possibly earlier)
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
style
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
data attributes
Desktop
- Chrome
- Supported
From 7 - Firefox
- Supported
From 6 - Safari
- Supported
From 5.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 6 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 7
Firefox
- From 6
Safari
- From 5.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 6
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.