Ausführbare HTML-Docs: HTML span

Q: Was ist der Unterschied zwischen div und span?

Ein ist ein Block: Es beginnt in einer neuen Zeile und nimmt die volle Breite ein. Ein ist inline: Es bleibt in der Textzeile und ist nur so breit wie sein Inhalt. Nimm div, um Inhaltsblöcke zu gruppieren, und span, um Wörter im Text zu markieren.

Q: Warum funktioniert width bei meinem span nicht?

Inline-Elemente ignorieren width, height und vertikale Außenabstände. Gib dem span display: inline-block, damit es in der Zeile bleibt und trotzdem eine Größe annimmt, oder display: block, damit es sich wie ein div verhält.

HTML span Tag: Textteile stylen und div vs. span

Das <span>-Tag ist ein allgemeiner Inline-Container: Es umschließt ein paar Wörter innerhalb einer Zeile, damit du sie stylen oder per Skript ansprechen kannst, ohne die Zeile zu brechen. Hier lernst du, wie du es einsetzt, wie es sich von div unterscheidet und wann ein spezifischeres Tag besser passt.

Diese Seite enthält ausführbare Editoren - bearbeiten, ausführen und Ausgabe sofort sehen.

Von Kevin Spektor, Co-founder & CTO

Veröffentlicht am Sep 24, 2026

Was das span-Tag macht

<span> umschließt ein Stück Text innerhalb einer Zeile, damit du es stylen oder mit JavaScript finden kannst. Es ist der Inline-Zwilling von <div>: Es hat keine Bedeutung und kein Standardaussehen, und es beginnt keine neue Zeile.

<!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>

Der Satz bleibt in einer Zeile. Nur die umschlossenen Wörter ändern sich.

div vs. span

Beide haben denselben Zweck (ein Container ohne Bedeutung) und unterscheiden sich darin, wie sie auf der Seite sitzen:

<!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>

Das div bricht den Satz in drei Zeilen und zieht sich über die ganze Seite; das span bleibt im Satz und liegt eng um seinen Text.

	`<div>`	`<span>`
Darstellung	Block	Inline
Beginnt eine neue Zeile	Ja	Nein
Breite	Volle verfügbare Breite	So breit wie sein Inhalt
`width`, `height`, vertikaler Außenabstand	Werden angewendet	Werden ignoriert
Darf enthalten	Alles, auch Blöcke	Nur Text und Inline-Elemente
Typische Verwendung	Abschnitte, Karten, Layout-Wrapper	Ein Wort oder eine Phrase im Text

Noch ein Unterschied: Ein <div> ist in einem <p> nicht erlaubt, und der Browser schließt den Absatz vorzeitig, wenn du es versuchst, während ein span überall stehen kann, wo Text steht. Mehr dazu auf der Seite zu div.

Ein span stylen: was geht und was nicht

Farbe, Schrift, Hintergrund und horizontaler Innenabstand funktionieren alle an einem span. Größe nicht: Ein Inline-Element ignoriert width, height sowie Außenabstände oben und unten. Stell es auf inline-block um, damit du ihm eine Größe geben kannst und es trotzdem in der Zeile bleibt:

<!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>

Das erste span ist nur so breit wie seine Wörter. Das zweite ist genau 120 mal 40 Pixel groß und sitzt trotzdem im Satz.

Spans mit JavaScript

Ein span ist der übliche Platzhalter für einen Wert, den ein Skript einsetzt, etwa einen Zähler oder einen Benutzernamen:

<!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>

Nur die Zahl ändert sich; der Rest des Satzes bleibt unberührt.

Wann ein spezifisches Tag besser ist als span

Ein span hat keine Bedeutung, ein Screenreader liest es also als normalen Text vor. Wenn die Wörter eine Rolle haben, nimm das Tag für diese Rolle und style es, wie du willst:

Bedeutung	Statt eines span
Wichtiger Text	`<strong>`
Betonung	`<em>`
Hervorgehobener oder markierter Text	`<mark>`
Code, ein Dateiname	`<code>`
Eine Taste auf der Tastatur	`<kbd>`
Ein Datum oder eine Uhrzeit	`<time datetime="2026-09-24">`
Text in einer anderen Sprache	`<span lang="fr">` (span plus das Attribut `lang`)

<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>

Die Seite zu fettem Text erklärt den Unterschied zwischen <strong>, <b>, <em> und <i>.

Häufige Fehler

width an einem normalen span setzen. Es wird ignoriert. Nimm display: inline-block.
Ein div oder einen Absatz in ein span setzen. Ungültiges HTML, das die Zeile bricht. Tausch das äußere span gegen ein div.
Anklickbare spans. Wie ein div ist auch ein span mit onclick nicht per Tastatur erreichbar. Nimm einen <button> oder einen Link.
Für jeden Style ein span. Wenn ganze Absätze oder Abschnitte einen Style brauchen, setz die Klasse direkt an das <p> oder den Container, statt ihren Text in ein span zu packen.

Häufig gestellte Fragen

Was ist ein span in HTML?

<span> ist ein allgemeiner Inline-Container. Es umschließt einen Teil einer Textzeile, zum Beispiel ein Wort, damit CSS oder JavaScript es ansprechen können, und hat weder ein eigenes Aussehen noch eine eigene Bedeutung.

Was ist der Unterschied zwischen div und span?

Ein <div> ist ein Block: Es beginnt in einer neuen Zeile und nimmt die volle Breite ein. Ein <span> ist inline: Es bleibt in der Textzeile und ist nur so breit wie sein Inhalt. Nimm div, um Inhaltsblöcke zu gruppieren, und span, um Wörter im Text zu markieren.

Warum funktioniert width bei meinem span nicht?

Inline-Elemente ignorieren width, height und vertikale Außenabstände. Gib dem span display: inline-block, damit es in der Zeile bleibt und trotzdem eine Größe annimmt, oder display: block, damit es sich wie ein div verhält.

Wie ändere ich die Farbe eines einzelnen Wortes in HTML?

Setz das Wort in ein span mit einer Klasse und färbe es per CSS: <span class="accent">word</span> mit .accent { color: #2563eb; }. Für einen schnellen Einzelfall geht auch <span style="color: #2563eb">word</span>.

Darf ein span ein div enthalten?

Nein. Ein span darf nur Inline-Inhalt enthalten, also Text, Links, Bilder und andere spans. Browser zeigen ein div in einem span trotzdem an, aber es ist ungültiges HTML und bricht die Zeile. Mach das äußere Element also zu einem div.

Verwandte Konzepte