The Span Element
Use span to mark up a small part of text inline.
Syntax
<p>The <span>highlighted</span> word.</p>The <span> element is a generic inline container. It is used to group or target a small part of text within a larger block.
Like <div>, it carries no meaning on its own, but it is handy for marking specific words or phrases.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer wraps a currency symbol in a <span> to style only that character a different color without affecting surrounding text.
- An analytics script uses <span data-track="cta"> to mark specific text for click-tracking without altering layout.
- A content editor wraps a product name in <span class="brand"> to apply a brand font via CSS within a paragraph.
More examples
Span for inline color styling
A <span> applies a color only to the word "Active" without breaking the surrounding paragraph layout.
<p>Status: <span style="color: green;">Active</span></p>Span with class for CSS targeting
Named classes on <span> let CSS stylesheets target specific words within flowing text.
<p>
Subscribe for <span class="price">$9/mo</span> and get
<span class="highlight">unlimited</span> access.
</p>Span for analytics data attributes
A <span> carries a data attribute used by JavaScript to fire an analytics event on the specific word.
<p>
Click <span data-event="cta-click" tabindex="0">here</span>
to download your free guide.
</p>
Discussion