<span> is a generic container for phrasing content, usually part of a sentence. Use it when a specific semantic element does not fit and you need a styling, language, or scripting hook.
Style part of a sentence
The availability text stays readable without color. The French phrase uses lang, which can help pronunciation tools choose the right language.
HTML and CSS
HTML
<p>Status: <span class="available">Available</span></p>
<p>The French phrase <span lang="fr">à bientôt</span> means “see you soon.”</p>CSS
.available {
color: #166534;
font-weight: 600;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Content and attributes
A span accepts phrasing content, not arbitrary block content such as a section or div. class, id, lang, and actual data-* attributes are useful. Changing display affects layout but does not change the HTML content model.
Do not add tabindex="0" to ordinary text just to make it accessible; screen-reader reading navigation already reaches text. The generic role does not support an accessible name, so aria-label on an ordinary span is not a reliable replacement for visible content. Avoid nonstandard role="text" as a general recipe.
Semantics and interaction
Use strong for importance, em for stress emphasis, mark for relevance, and del for an edit. A span with a click handler is not a native control. Choose button or a instead.
Sources and browser support
MDN: span describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.