Runnable HTML Docs: Span

Q: What is the difference between div and span?

A is a block: it starts on a new line and takes the full width. A is inline: it stays inside the line of text and is only as wide as its content. Use div to group blocks of content, span to mark words inside text.

Q: Why does width not work on my span?

Inline elements ignore width, height and vertical margins. Give the span display: inline-block to keep it in the line while accepting a size, or display: block to make it behave like a div.

Q: How do I change the color of one word in HTML?

Wrap the word in a span with a class and color it in CSS: word with .accent { color: #2563eb; }. For a quick one-off, word works too.

What the span tag does

<span> wraps a piece of text inside a line so you can style it or find it with JavaScript. It is the inline twin of <div>: it has no meaning and no default look, and it does not start a new line.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

The sentence stays on one line. Only the wrapped words change.

div vs span

The two are identical in purpose (a container with no meaning) and differ in how they sit on the page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

The div breaks the sentence into three lines and stretches across the page; the span stays in the sentence and hugs its text.

	`<div>`	`<span>`
Display	Block	Inline
Starts a new line	Yes	No
Width	Full available width	As wide as its content
`width`, `height`, vertical margin	Applied	Ignored
Can contain	Anything, including blocks	Only text and inline elements
Typical use	Sections, cards, layout wrappers	A word or phrase inside text

One more difference: a <div> is not allowed inside a <p>, and the browser closes the paragraph early if you try, while a span can go anywhere text goes. More on that on the div page.

Styling a span: what works and what does not

Color, font, background and horizontal padding all work on a span. Size does not: an inline element ignores width, height and top and bottom margins. Switch it to inline-block to size it while keeping it in the line:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

The first span is only as wide as its words. The second is exactly 120 by 40 pixels and still sits inside the sentence.

Spans with JavaScript

A span is the usual placeholder for a value a script fills in, such as a counter or a user name:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Only the number changes; the rest of the sentence is untouched.

When a specific tag is better than span

A span has no meaning, so a screen reader reads it as plain text. When the words have a role, use the tag for that role and style it as you like:

Meaning	Use instead of a span
Important text	`<strong>`
Stressed emphasis	`<em>`
Highlighted or marked text	`<mark>`
Code, a file name	`<code>`
A keyboard key	`<kbd>`
A date or time	`<time datetime="2026-09-24">`
Text in another language	`<span lang="fr">` (span plus the `lang` attribute)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

The bold page explains the difference between <strong>, <b>, <em> and <i>.

Common mistakes

Setting width on a plain span. It is ignored. Use display: inline-block.
Putting a div or a paragraph inside a span. Invalid HTML that breaks the line. Swap the outer span for a div.
Clickable spans. Like a div, a span with onclick cannot be reached with the keyboard. Use a <button> or a link.
A span for every style. If whole paragraphs or sections need a style, put the class on the <p> or container itself instead of wrapping its text in a span.

Frequently Asked Questions

What is a span in HTML?

<span> is a generic inline container. It wraps part of a line of text, such as one word, so CSS or JavaScript can target it, and it has no look or meaning of its own.

What is the difference between div and span?

A <div> is a block: it starts on a new line and takes the full width. A <span> is inline: it stays inside the line of text and is only as wide as its content. Use div to group blocks of content, span to mark words inside text.

Why does width not work on my span?

Inline elements ignore width, height and vertical margins. Give the span display: inline-block to keep it in the line while accepting a size, or display: block to make it behave like a div.

How do I change the color of one word in HTML?

Wrap the word in a span with a class and color it in CSS: <span class="accent">word</span> with .accent { color: #2563eb; }. For a quick one-off, <span style="color: #2563eb">word</span> works too.

Can a span contain a div?

No. A span may only contain inline content such as text, links, images and other spans. Browsers still display a div inside a span, but it is invalid HTML and breaks the line, so switch the outer element to a div.

Related concepts