<span>

Zuletzt aktualisiert am 3. Februar 2026

Das <span>-Element ist ein generischer Inline-Container, das Inline-Gegenstück zum <div>. Es hat keine eigene semantische Bedeutung und wird verwendet, um einzelne Textabschnitte oder Inline-Elemente zu gruppieren, typischerweise für CSS-Styling oder JavaScript-Manipulation. Wenn du ein einzelnes Wort oder einen Satzteil farblich hervorheben oder mit einer CSS-Klasse versehen willst, ist <span> dein Werkzeug. Auf dieser Seite lernst du, wann <span> sinnvoll ist und wann ein anderes Element die bessere Wahl wäre.

Grundlagen

Stell dir <span> als unsichtbare Klammer vor, die du um ein Wort oder einen Textabschnitt legst. Anders als <div> erzeugt es keinen Zeilenumbruch und nimmt nur so viel Platz ein, wie sein Inhalt benötigt. Es fließt einfach im Text mit.

• <span> ist ein Inline-Element: Es unterbricht den Textfluss nicht und erzeugt keinen Zeilenumbruch
• Es hat keine semantische Bedeutung: Screenreader und Suchmaschinen können damit allein nichts anfangen
• Ideal zum Stylen einzelner Textteile innerhalb eines Absatzes oder einer Überschrift
• Es ist das Inline-Gegenstück zu <div>: Während <div> Block-Elemente gruppiert, gruppiert <span> Inline-Inhalte
• Bevor du <span> verwendest, prüfe: Gibt es ein semantisches Inline-Element wie <strong>, <em>, <mark> oder <code>, das hier besser passt?

Syntax

<p>
  Dies ist ein <span>hervorgehobener</span> Text.
</p>

Beispiele

Text farblich hervorheben

Ein typischer Anwendungsfall: Du willst ein einzelnes Wort oder einen Satzteil in einer anderen Farbe darstellen. Mit <span> und einem Inline-Style oder einer CSS-Klasse ist das ganz einfach:

<p>
  Der Preis beträgt
  <span style="color: #e11d48; font-weight: bold;">29,99 €</span>
  inkl. MwSt.
</p>

Mehrere Spans für unterschiedliches Styling

Wenn du verschiedene Textabschnitte in einem Absatz unterschiedlich gestalten willst, kannst du mehrere <span>-Elemente mit verschiedenen Klassen oder Styles verwenden:

<p>
  <span style="background-color: #fef3c7; padding: 2px 6px;">HTML</span>
  ist die Struktur,
  <span style="background-color: #dbeafe; padding: 2px 6px;">CSS</span>
  ist das Design und
  <span style="background-color: #dcfce7; padding: 2px 6px;">JavaScript</span>
  ist die Interaktion.
</p>

Span als JavaScript-Ziel

Ein weiterer häufiger Einsatz: Du willst einen Textteil dynamisch per JavaScript ändern. Dafür gibst du dem <span> eine ID und aktualisierst den Inhalt über das DOM:

<p>Heute ist <span id="wochentag">Montag</span>.</p>

<script>
  const tag = document.getElementById("wochentag");
  tag.textContent = "Dienstag";
</script>

Barrierefreiheit

Ein <span> ist für Screenreader komplett unsichtbar: Es wird nicht angekündigt und hat keine semantische Bedeutung. Der Screenreader liest einfach den Textinhalt vor, als wäre das <span> nicht vorhanden. Das ist in den meisten Fällen genau das gewünschte Verhalten.

Wenn du allerdings einen Textabschnitt hervorhebst, der eine Bedeutung trägt (z.B. “wichtig”, “fehlerhaft”, “neu”), solltest du stattdessen ein semantisches Element verwenden: <strong> für Wichtigkeit, <em> für Betonung, <mark> für Hervorhebung. Ein <span style="color: red;"> sieht zwar rot aus, aber ein Screenreader teilt dem Nutzer die Farbe nicht mit: Die Information geht verloren.

Falls du ein <span> mit einer visuellen Bedeutung versehen musst, die kein natives Element abdeckt, kannst du aria-label oder role verwenden, um die Information für Screenreader zugänglich zu machen.

Häufige Fehler

• Span statt semantischem Element: Wenn du Text fett oder kursiv darstellen willst, verwende <strong> oder <em> statt <span style="font-weight: bold;">. Semantische Elemente teilen Screenreadern und Suchmaschinen die Bedeutung mit. Ein <span> mit Inline-Style sieht zwar gleich aus, hat aber keine Bedeutung.

• Block-Elemente in Span verschachteln: <span> ist ein Inline-Element und darf keine Block-Elemente wie <div>, <p> oder <h1> enthalten. Der Browser korrigiert das zwar automatisch, aber das Ergebnis ist oft nicht das, was du erwartet hast. Wenn du Block-Elemente gruppieren willst, verwende <div>.

• Überflüssige Spans: Ein <span> ohne class, id oder style ist nutzlos: Es tut nichts und bläht nur deinen Code auf. Wenn das <span> keinen Styling- oder JavaScript-Zweck erfüllt, kannst du es einfach weglassen.

Browser-Kompatibilität

Das span-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Du kannst es bedenkenlos einsetzen.

Email-Kompatibilität

Das span-Element wird in den meisten Email-Clients gut unterstützt und ist eine zuverlässige Wahl für Inline-Styling in E-Mails.

Verwandte Elemente