**`<span>`** is the inline counterpart to `<div>`: it carries **zero semantic meaning** by itself and applies no default styling — it exists purely so you can attach a `class`, `id`, inline `style`, or a JavaScript event handler to a specific run of text without affecting the surrounding layout (since it's inline, not block-level). Use it only when no more meaningful element (`<strong>`, `<em>`, `<mark>`, `<abbr>`, etc.) already fits the purpose.
1Understanding <span>
`<span>` is the inline counterpart to <div>: it carries zero semantic meaning by itself and applies no default styling — it exists purely so you can attach a class, id, inline style, or a JavaScript event handler to a specific run of text without affecting the surrounding layout (since it's inline, not block-level). Use it only when no more meaningful element (<strong>, <em>, <mark>, <abbr>, etc.) already fits the purpose.
Before reaching for <span>, check if a semantic element already fits: highlighted text might be <mark>, important text might be <strong> — <span> is the fallback for 'purely visual, no meaning' cases.
<p>Click <span id="counter">0</span> times so far.</p>
<script>
document.getElementById('counter').textContent = 5;
</script>2Practical Example
Here is a real-world application of <span> showing how it is used in production HTML.
<!-- Using span purely to color part of a sentence via CSS -->
<p>Status: <span class="status-ok">All systems operational</span></p>3Best Practices
Follow these guidelines when working with <span>:
1. Use <span> only when no semantic element fits the purpose
2. Attach class/id to <span> for CSS styling or JS hooks, not inline style when avoidable
3. Prefer <mark>, <strong>, <em>, <abbr>, etc. when their specific meaning actually applies
Tip: Before reaching for <span>, check if a semantic element already fits: highlighted text might be <mark>, important text might be <strong> — <span> is the fallback for 'purely visual, no meaning' cases.
<p>Click <span id="counter">0</span> times so far.</p>
<script>
document.getElementById('counter').textContent = 5;
</script>