Menu
Text & Formatting
<span> Generic Inline
A non-semantic inline container for styling pieces of text.
1Inline Wrapper
Use <span> to apply CSS or JavaScript hooks to a slice of text without breaking the line.
Example Code
css
<p>Total: <span class="price">$49.99</span> only today!</p>2Put the element in context
A span marks a generic inline range of text for styling or scripting. It should not replace emphasis, a link, a button, or another element with a specific meaning. An inline color accent may fit a span, while an actionable label needs the appropriate control.
3Practice with a small page
Use a span to accent a short phrase inside a paragraph without giving it unintended semantic emphasis. Compare it with strong for a phrase that is actually important. Confirm that a styled span is not being used as an inaccessible clickable control.
Finished reading?
Mark this topic as complete to track progress.