Description

The <span> element is a generic inline container for phrasing content. It is essentially the inline equivalent of the <div> element. While a <div> is used to group large blocks of content, a <span> is used to target small portions of content within a line.

By default, <span> does not represent anything. It doesn't add a new line, it doesn't change font size, and it doesn't add margins. Its power comes from being a "hook" for CSS styling and JavaScript functionality. When you need to change the color of a single word in a sentence or target a specific number for a live update, <span> is the standard tool.

Because it is an inline element, it only occupies the width of the content it contains. It can be safely placed inside paragraphs, headings, or other inline elements without breaking the flow of the document.

In technical terms, <span> is part of the "phrasing content" category in HTML5, meaning it is designed to be used within the text of a document rather than as a structural wrapper for large sections.

CSS Display:inline

Syntax

<span>Inline content</span>

Popular Attributes

AttributeDescription
classSpecifies one or more CSS class names for styling the element.
idA unique identifier for the element. Used for CSS styling, JavaScript targeting, and anchor links.
styleApplies inline CSS styles directly to the element.
titleProvides advisory text, often displayed as a tooltip on hover.
langSpecifies the language of the element's content (e.g. "en", "fr").
dirSpecifies the text direction. Values: ltr (left-to-right), rtl (right-to-left), auto.
tabindexSpecifies the tab order of the element for keyboard navigation.
aria-*
data-*

This element also supports global HTML attributes such as class, id, style, data-*, and more.

Examples

Highlighting Specific Text
<p>Our mission is to <span class="highlight">innovate</span> and lead.</p> <style> .highlight { background-color: #fef08a; padding: 2px 4px; border-radius: 4px; font-weight: bold; } </style>
Using a span with a CSS class to highlight a specific word within a sentence.
Multi-styled Status Bar
<div class="status-bar"> <span class="label">Status:</span> <span class="value online">Online</span> </div>
Grouping multiple spans together to create complex UI components like status indicators.
Dynamic Data Target
<p>You have <span id="cart-count">0</span> items in your cart.</p> <script> // JavaScript can easily target the span ID document.getElementById("cart-count").innerText = "5"; </script>
Using a span with an ID as a placeholder for data that will be updated by JavaScript.

Notes

The "Semantic First" Rule: Since <span> carries no meaning, you should always check if a more specific tag exists. For example, use <strong> for importance, <em> for emphasis, <mark> for highlighted search results, or <time> for dates. Only use <span> when the change is purely visual or functional with no inherent meaning.

Accessibility (A11y): Screen readers treat <span> as plain text. If you are using a span to convey meaning (like an icon that represents a status), you must use ARIA attributes like aria-label or role to ensure users with visual impairments can understand the context.

Styling & Performance: While you can use the style attribute directly on a span, it is best practice to use the class attribute. This keeps your HTML clean and allows you to reuse styles across multiple spans efficiently.

Nesting: A <span> can contain other inline elements (like <a>, <img>, or other <span>s), but it should never contain block-level elements like <div>, <p>, or <h1>. Doing so results in invalid HTML and unpredictable browser rendering.

Common Pitfalls:

  • Using <span> for headers instead of <h1-h6> (bad for SEO and accessibility).
  • Wrapping entire paragraphs in a <span>.
  • Forgetting that spans don't support width or height unless set to display: inline-block or block.

Related Tags

<div><p>