HTML <span> Tag
The HTML <span> tag is a generic inline container with no semantic meaning, used to style or script a piece of text. Examples and best practices.
The HTML <span> tag is a generic inline container for a piece of text or content. Unlike most HTML elements, it carries no semantic meaning — it tells the browser and assistive technologies nothing about what the content is. Its only job is to mark a span of inline content so you can target it with CSS or JavaScript.
Because it adds no meaning, <span> should be your last resort, not your first. Whenever a semantic element fits the content, reach for that instead:
| If the text is… | Use this, not <span> |
|---|---|
| emphasized | <em> |
| important / strong | <strong> |
| highlighted / relevant | <mark> |
| an abbreviation | <abbr> |
| code | <code> |
| a date or time | <time> |
Use <span> only when no semantic inline element applies and you simply need a styling or scripting hook — for example, coloring a single word, wrapping a character for a drop-cap effect, or labeling a decorative icon.
Prefer semantic elements
The two snippets below look identical in the browser, but they are not equal. The first uses a <span> with an inline style; the second uses <mark>, which actually communicates "this text is highlighted for relevance" to screen readers and search engines.
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>When you only need a hook for styling and there is no semantic match, <span> is the right tool. When the styling reflects meaning, choose the element that carries that meaning.
<span> vs <div>
<span> and <div> are the two "meaningless" generic containers in HTML. The difference is the box they create:
<span>is inline — it flows within a line of text and takes only the width of its content. It cannot legally contain block-level elements.<div>is block-level — it starts on a new line and stretches to the full width of its parent. Use it to group larger sections.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Rule of thumb: use <span> for a portion of a line, and <div> for a block of content.
Syntax
The <span> tag comes in pairs. The content is written between the opening (<span>) and closing (</span>) tags.
In the example below, we apply a style directly inside the tag.
Example of the HTML <span> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Let's see another example where we add a class attribute to the tag and apply the styles separately in a stylesheet. This creates a drop cap — an oversized first letter, a classic typographic touch for the opening of a chapter.
Example of the HTML <span> tag with the class attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Accessibility use cases
Two patterns make <span> genuinely useful for accessibility.
Screen-reader-only text. A visually-hidden class hides text from the screen but keeps it available to screen readers. This is the standard way to give context that sighted users get from layout alone.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Labeling icons. Icon fonts and decorative glyphs have no text for a screen reader to announce. Hide the decorative <span> with aria-hidden and supply an accessible name with aria-label on the link or button.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Here aria-hidden="true" removes the visual "×" from the accessibility tree, while aria-label tells assistive tech the button means "Close dialog".
Attributes
<span> takes no attributes of its own. In practice these global attributes do almost all the work:
| Attribute | Purpose |
|---|---|
class | Hook the element up to one or more CSS rules. |
id | Give a unique identifier for CSS or JavaScript targeting. |
style | Apply inline CSS directly (handy for one-off styling). |
lang | Mark a run of text as a different language, e.g. <span lang="fr">. |
The tag also supports the event attributes, so you can react to user actions such as clicks or hovers. An event occurs when the browser reacts to a user action — clicking the mouse, playing a video, submitting a form, and so on.