The <span> element
The <span> tag is a generic inline container with no semantic meaning. It wraps a small piece of text or inline content so it can be styled with CSS or targeted with JavaScript — without adding a line break the way a <div> would.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, palpable content |
| Content model | Phrasing content — text and other inline elements |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLSpanElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | <span> has no attributes of its own — only the global attributes shared by every HTML element (id, class, style, title, data-*, etc.). |
Common examples
Color or style part of a sentence
Wrap just the words you want to change. The rest of the paragraph is unaffected.
Update a number with JavaScript
Give a span an id and change its text from a script — handy for counters, prices and live totals.
Create a small badge or label
Spans are perfect for inline labels such as “New” or “Sale” next to a heading or product name.
<span> vs <div>
A <span> and a <div> are both meaningless containers, but they behave differently in the layout. A span stays inside the current line of text, while a div breaks onto its own line and takes the full width.
That makes the span the right choice for small, inline changes — coloring a word, wrapping a price or a counter — and the div the right choice for blocks of content. You can change either with CSS display, but starting with the right element keeps your HTML valid and your CSS simpler.
| <span> | <div> | |
|---|---|---|
| Display | Inline | Block |
| Width & height | Ignored unless display changes | Work as expected |
| Best for | A few words or an icon | Sections and layout |
Common mistakes to avoid
- Expecting width and height to work. A span is inline, so it ignores width, height and top/bottom margins. Set
display: inline-block(orblock) first. - Using a span for meaning. If text is important or emphasised, use <strong> or <em>; a span tells screen readers nothing.
- Putting block elements inside a span. A
<div>or<p>inside a span is invalid HTML; use a div as the wrapper instead. - Making a span clickable. Like a div, a clickable span can’t be reached by keyboard. Use a <button> or a link.
Accessibility & SEO tips
- For icon-only spans (such as an emoji or icon font), add
aria-hidden="true"and provide the meaning as real text, so screen readers don’t read out a confusing symbol. - A common accessibility pattern is a “visually hidden” span: text that is hidden on screen with CSS but still read by screen readers, e.g. “(opens in a new tab)”.
- Search engines ignore spans themselves and read the text inside, so they have no SEO effect either way.
- Keep class names descriptive (
class="price"rather thanclass="red") so your spans still make sense when the design changes.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorials: How to center a div, How to change text color