References

Beginner-friendly references for web development, with live, editable examples.

The HTML <span> tag

Element All modern browsers Updated
Quick answer

The HTML <span> element is a generic inline container with no semantic meaning. Use it to style or script part of a line of text — but prefer a semantic inline element such as <em>, <strong>, <mark> or <code> when one conveys the meaning.

Overview

The <span> element is the inline counterpart to <div>: a generic, meaningless container, but one that flows within a line rather than forming its own block. It is the tool for targeting a fragment of text with CSS or JavaScript.

Typical uses are wrapping a word to color or highlight it, splitting text for animation, or marking an insertion point for a script to update (such as a live counter). Because it has no semantics, choose a meaningful inline element first — <strong> for importance, <em> for emphasis, <mark> for relevance, <code> for code, or <time> for dates — and fall back to <span> only when none applies.

Syntax

<p>The total is <span class="price">£42.00</span>.</p>

Example

Live example 
<p style="font-size:1.1rem;">The price is <span style="color:#16a34a; font-weight:700;">£42.00</span> today only.</p>

Best practices

  • Prefer a semantic inline element (<strong>, <em>, <mark>, <code>) when it conveys the meaning.
  • Use <span> for purely visual styling of a text fragment, with a class.
  • Only place inline content inside a <span> — never block-level elements.
  • Do not rely on a styled <span> to convey meaning (like color for status) without accompanying text or ARIA.

Accessibility

Like <div>, a <span> has no role and adds nothing to the accessibility tree. Never let styling on a span be the only signal of meaning — for example coloring a word red to mean "error". Pair it with visible text or an appropriate aria-* attribute so the meaning is perceivable to everyone.

Frequently asked questions

What is the <span> element used for?
Wrapping a run of inline text or other inline content so it can be styled with CSS or targeted by JavaScript, without changing the document structure.
What is the difference between <span> and <div>?
<span> is inline (it flows within text), while <div> is block-level (it starts a new line and fills the width). Both are generic and carry no meaning.
Is <span> a semantic element?
No. If a fragment of text has meaning, use a semantic inline element such as <strong>, <em> or <mark> instead.
Can I put a block element inside a <span>?
No. A <span> may only contain phrasing (inline) content. Use a <div> to wrap block-level content.
source strong