span element

Use span to wrap a small inline part of text when you need a CSS or JavaScript hook but no additional meaning.

What does span do?

span is a generic inline container. It does not describe the content as important, emphasized, quoted, or interactive. It simply groups a part of a line so CSS, JavaScript, or attributes can target it.

<p>Your code is <span class="status">ready</span>.</p>

.status {
  color: green;
  font-weight: 700;
}

span or div?

Use span for content that stays in the flow of a sentence. Use div for a block-level group or a layout container. Neither element adds useful meaning by itself.

<p>A word can be <span class="highlight">highlighted</span>.</p>

<div class="card">
  <h2>A separate content block</h2>
</div>

Prefer meaning when you have it

If the text is important, emphasized, highlighted, or a quotation, use strong, em, mark, or q. If something should be clicked, use button or a instead of making a span clickable.

<button type="button" id="saveButton">Save</button>

// A span would not provide keyboard behavior by default.
document.querySelector('#saveButton').addEventListener('click', save);

Useful attributes

Classes are common for styling, while data-* attributes are useful when a script needs small pieces of custom data. An id can identify one unique element, but it should not be duplicated.

<span class="price" data-currency="USD">$20</span>

Related pages

• div element
• class attribute
• data-* attributes
• button element