HTML span – Inline-Formatierung ohne eigene Eigenschaften

Feb 2026

HTML span separiert Inline-Elemente wie Textabschnitte, Eingabefelder oder Bilder für CSS oder Javascript. span ist nur ein Behälter ohne semantische Bedeutung, hat ohne CSS keine Auswirkung auf die Darstellung, und wird immer nur so breit wie sein Inhalt.

span: inline-Element für CSS und Javascript

Das span-Element sollte nur eingesetzt werden, wenn kein semantisches HTML-Element wie em oder strong, del oder code angebracht ist. Weil span per Vorgabe ein inline-Element ist, greifen width und height nicht, margin-top und margin-bottom wirken nicht normal, transform kann das Layout unerwartet verschieben. In dieser Hinsicht ist span das Gegenstück zum div-Element, nur eben ohne Zeilenumbruch. Beide Elemente nehmen eine Reihe von weiteren Elementen auf, um Attribute oder CSS-Stile auf sie anzuwenden, ohne selber eine Formatierung einzubringen.

Wir können den Wind nicht ändern, aber die Segel anders setzen. Aristoteles

Wir können den <span class="rule1">Wind</span> nicht ändern, 
<span class="rule3">aber die <span class="rule1">Segel</span> anders setzen</span>.
<span class="rule2">Aristoteles</span>

span-Elemente können beliebig ineinander verschachtelt werden. Innerhalb von span dürfen nur Inline-Elemente liegen – also keine HTML-Elemente wie div, table, ul, li oder p.

HTML span gehört zu den sogen. Phrasing-Elementen (in HTML4 / XHTML noch Inline-Elemente genannt) und muss immer geschlossen werden.

Am Rande: Mit HTML data und seinem value-Attribut ist ein Pendant zum span aufgetaucht, das ohne CSS ebenfalls keine Formatierung mit sich bringt. data ist wie span ein inline-Element, aber mit einem value-Attribut, das die mundgerechte Aufbereitung von Werten für Scripte vereinfacht.

<data value="12.99">€ 12,99</data>

span für Effekte und Animationen

class- und id-Attribute des öffnenden span-Tags transportieren CSS in die Elemente und wirken in Scripten zur Identifizierung des Elements.

<div class="demo">
   <div class="dline"><span class="opn">+</span></div>
   <figure>
      …
   </figure>
</div>

<style>
.demo { width: 280px; margin: 1em auto}
.opn { font-size: 2em; cursor: pointer}
.dline { background: orchid; color: white; text-align: right; }
</style>

<script>
const button = document.querySelector(".opn");
const figure = document.querySelector(".demo figure");

if (button && figure) {
  button.addEventListener("click", () => {
    const isOpen = figure.classList.toggle("showspan");
    button.textContent = isOpen ? "−" : "+";
  });
}
</script>

Wo span kontraproduktiv ist

Im Grunde genommen gibt es kaum ein HTML-Element, das so harmlos ist wie ein span-Tag. Aber es ist nicht gerade sinnvoll, etwas von Bedeutung in ein span zu setzen. Dafür gibt es bessere HTML-Tags.

<span class="important">Wichtig!</span>

Das bringt mehr:

<strong>Wichtig!</strong>

<mark>Wichtig!</mark>

Ganz schlimm (nicht fokussierbar, keine Unterstützung für Tastatur-Navigaion, keine Infos für Screenreader)

<span id="button">Wichtig!</span>

SEO: Keine Relevanz für die Suchmaschinen, keine Struktur, nichts für die Accessibility

<span class="header">SEO-Header</span>