← Back to All Tags

<span>

Defines an inline container for styling and scripting

Definition and Usage

The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

The <span> tag is easily styled with CSS or manipulated with JavaScript using the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

Tip: Use the <span> tag to group inline-elements and apply styles to them with CSS or manipulate them with JavaScript.
Note: The <span> tag is a generic inline container and has no semantic meaning. Use semantic elements when appropriate (e.g., <strong>, <em>).

Browser Support

The <span> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <span> tag supports the Global Attributes in HTML.

The <span> tag also supports the Event Attributes in HTML.

Examples

Basic Span

Use span to style part of a paragraph:

Example

<p>This is a <span style="color: red;">red</span> word in a sentence.</p>

Span with CSS Class

Apply CSS classes to style text:

Example

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
  }
</style>

<p>This is <span class="highlight">important text</span> in a paragraph.</p>

JavaScript Targeting

Use span with JavaScript to manipulate content:

Example

<p>Click count: <span id="counter">0</span></p>
<button onclick="incrementCounter()">Click Me</button>

<script>
  let count = 0;

  function incrementCounter() {
    count++;
    document.getElementById('counter').textContent = count;
  }
</script>

Text Highlighting

Highlight specific words or phrases:

Example

<style>
  .price {
    color: #27ae60;
    font-weight: bold;
    font-size: 1.2em;
  }

  .discount {
    color: #e74c3c;
    text-decoration: line-through;
  }
</style>

<p>
  Original Price: <span class="discount">$99.99</span>
  Sale Price: <span class="price">$69.99</span>
</p>

Icon Wrapper

Wrap icons or special characters:

Example

<style>
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #745af2;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 20px;
    margin-right: 5px;
  }
</style>

<p><span class="icon">i</span> Information: Click here for more details.</p>

Data Attributes

Store custom data in span elements:

Example

<p>
  Temperature:
  <span id="temp" data-celsius="25" data-fahrenheit="77">25</span>
  <button onclick="toggleTemp()">Toggle °C/°F</button>
</p>

<script>
  let isCelsius = true;

  function toggleTemp() {
    const temp = document.getElementById('temp');
    if (isCelsius) {
      temp.textContent = temp.dataset.fahrenheit;
      isCelsius = false;
    } else {
      temp.textContent = temp.dataset.celsius;
      isCelsius = true;
    }
  }
</script>

Multiple Spans in Text

Style different parts of text differently:

Example

<style>
  .author { font-weight: bold; color: var(--text-primary); }
  .date { color: #999; font-style: italic; }
  .category {
    background: #745af2;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
  }
</style>

<article>
  <p>
    By <span class="author">John Doe</span> |
    <span class="date">January 15, 2025</span> |
    <span class="category">Technology</span>
  </p>
</article>

Try it Yourself

Interactive Example

Here's a live example of styled spans:

This paragraph contains highlighted text, bold text, and italic text using span elements.

Span vs Div: Understanding the Difference

Feature <span> <div>
Display Type Inline Block
Line Break Does not create line breaks Creates line breaks before and after
Width Only as wide as content Takes full width available
Use Case Styling small portions of text Creating layout sections
Can Contain Inline elements and text Block and inline elements
Example Highlighting a word in a sentence Creating a container for a section

Common Use Cases

  • Text Styling: Apply specific colors, fonts, or backgrounds to portions of text
  • JavaScript Hooks: Target specific elements for dynamic content updates
  • Icons and Symbols: Wrap icons or special characters for styling
  • Data Display: Display dynamic data that needs to be updated via JavaScript
  • Inline Formatting: Apply CSS to specific words without breaking text flow
  • Tooltips: Create custom tooltips with title attributes
  • Translation: Mark text segments for language translation

Best Practices

  • Use Semantic Alternatives: Prefer <strong>, <em>, <mark> when they fit the meaning
  • Don't Overuse: Too many spans can make HTML hard to read and maintain
  • Keep It Simple: Use spans for styling and scripting, not for structure
  • Add Classes/IDs: Use meaningful class names for better code readability
  • Avoid Empty Spans: Don't create spans without content unless absolutely necessary
  • Accessibility: Ensure styled text remains readable with sufficient color contrast
  • Performance: Minimize nested spans for better performance

Semantic Alternatives

Before using <span>, consider if a semantic element is more appropriate:

  • <strong> - For important text (strong importance)
  • <em> - For emphasized text (stress emphasis)
  • <mark> - For highlighted/marked text
  • <code> - For code snippets
  • <abbr> - For abbreviations
  • <time> - For dates and times
  • <kbd> - For keyboard input
Remember: Use <span> only when there's no semantic HTML element that fits the purpose. Semantic HTML improves accessibility and SEO.

Default CSS Settings

Most browsers will display the <span> element with the following default values:

Default CSS

span {
  display: inline;
}

Related Tags

  • <div>

    Block-level container element

  • <p>

    Defines a paragraph

  • <a>

    Defines a hyperlink

  • <strong>

    Defines important text

  • <em>

    Defines emphasized text