<span>

The HTML <span> element is a generic inline container used to group and style inline content. Often used to mark up a part of a block of text.

It is a non-semantic element that does not affect the layout, unless styled using CSS. As an inline element, it only takes up as much width as necessary and does not force line breaks.

💡 Tip: Use <span> to style or change a section of text without affecting the flow of the document.

Syntax

<span>Inline text</span>

When to use <span>

• Creating an inline container where no semantic element is suitable.
• For styling a specific section of text within a paragraph.
• To apply CSS classes or JavaScript functionality to inline content.
• For grouping inline elements together for styling.

📝 Note: The <span> element is non-semantic, meaning it does not describe the content it contains. Use semantic elements like <strong>, <em>, or <mark> when they better describe the content.

Basic usage

Here is a simple example of using a <span> element:

<p>Welcome to <span class="highlight">Learn Web Development</span>. We provide free tutorials and courses to help you master web development and coding skills.</p>

Inline element

The <span> element is an inline element, meaning:

• Does not create line breaks.
• Only takes up as much width as required.
• Flows with the surrounding content.
• Can't contain block-level elements.
• Can contain other inline elements.

<p>This is a <span>span element</span> within a paragraph.</p>
<p>Another <span>span</span> in a different paragraph.</p>

Output:

This is a span element within a paragraph.

Another span in a different paragraph.

Notice how the content flows within the surrounding text without breaking onto a new line, or adding any additional formatting (other than CSS).

Styling text portions

A common use of <span> is to style specific parts of text:

<p>Our <span class="featured">JavaScript course</span> is now available with <span class="new">new content</span> and improved examples.</p>

With CSS styling:

.featured {
  background-color: yellow;
  font-weight: bold;
}

.new {
  color: red;
  font-style: italic;
}

Using with JavaScript

The <span> element is commonly used with JavaScript to dynamically update content. Here's an example with a price calculation:

<p>Total price: <span id="price">$0.00</span> (including tax)</p>

<script>
function updatePrice(price, tax) {
  const totalPrice = price * (1 + tax);
  document.getElementById('price').textContent = `$${totalPrice.toFixed(2)}`;
}

updatePrice(39.99, 0.2);
</script>

In another exaple, clicking the <span> will toggle the text between "Online" and "Offline", along with updating styling.

<p>Status: <span id="status">Online</span></p>

<script>
document.getElementById('status').addEventListener('click', function() {
  if (this.textContent === 'Online') {
    this.textContent = 'Offline';
    this.style.color = 'red';
  } else {
    this.textContent = 'Online';
    this.style.color = 'green';
  }
});
</script>

Nesting rules

The <span> element can contain other inline elements but not block-level elements:

<!-- Correct -->
<span>This contains <strong>bold text</strong> and <em>italic text</em>.</span>

<!-- Incorrect -->
<span>
  <div>Not correct - div is a block-level element</div>
</span>

Common use cases

• Highlighting specific words or or sections within a block of text.
• Styling individual characters or words.
• Applying JavaScript to specific text.
• Adding CSS classes for styling purposes.
• Adding icons or small elements within text flow.
• Creating tooltips.

Accessibility and best practices

• Keep styled text readable and accessible.
• Use descriptive class names for better maintainability.
• Use semantic elements like <strong>, <em>, or <mark> where applicable.

Styling

The <span> element is commonly styled with CSS:

.highlight {
  background-color: yellow;
}

.important {
  color: red;
  font-weight: bold;
}

.tooltip {
  border-bottom: 1px dotted #666;
  cursor: help;
}

Conclusion

The <span> element is useful for styling and manipulating inline content. Use it to apply styles or JavaScript to specific parts of text without affecting the overall document structure/flow.