<span>
A generic inline container with no meaning, for styling a piece of text.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Your progress: <span style="color: #34d399; font-weight: 600;">12 of 20</span> lessons</p>
<p>
Plan:
<span style="padding: 2px 10px; border-radius: 999px; background: #7c3aed; color: white;">Premium</span>
</p>Definition and usage
#The <span> element is the inline counterpart of <div>. It wraps a piece of text within a line, such as a word, a number, or an icon, so it can be styled or found in JavaScript. It doesn’t break the line, and on its own it means nothing.
Before you use it, check whether a better element exists. Important text is <strong>, stress is <em>, a highlight is <mark>, code is <code>, and a date is <time>. Leave <span> for situations where none of them fit: a colored label, a counter updated by a script, or a piece of text in a different typeface.
It can only hold phrasing content inside, so don’t put paragraphs or <div> elements inside a <span>. As an inline element, it also ignores width and height, and vertical margins don’t push neighboring lines away. If you need that, change its display to inline-block.
Syntax
#<span>piece of text</span>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>The promo ends in <span id="seconds">10</span> s.</p>
<script>
let left = 10;
const counter = document.getElementById('seconds');
const timer = setInterval(() => {
left -= 1;
counter.textContent = left;
if (left === 0) clearInterval(timer);
}, 1000);
</script>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- First look for an element with a specific meaning:
<strong>,<em>,<mark>,<code>, or<time>. - Don’t nest block-level elements, such as
<div>or<p>, inside a<span>. - If a
<span>contains only a decorative icon, give itaria-hidden="true", and convey the meaning with text next to it.
Related entries
#- <div> vs <span><div> is a block-level container with no meaning, and <span> is its inline counterpart. Both exist only for grouping and styling, never to describe content.
- <div>A generic block-level container with no meaning, for grouping elements and styling.
- <strong>Text of great importance: a warning, key information.
- <em>Stress in a sentence: a word that, read aloud, is pronounced with emphasis.
- <mark>Highlights a piece of text like a highlighter, because it’s relevant in the current context.
- <code>A piece of computer code: the name of a variable, function, tag, or file, as well as a short listing.
- <p>A paragraph of text.
Spotted a mistake or missing an example? Write to us.