Das span-Element ist das Gegenstück zum div innerhalb einer Zeile: Es umschließt einen Textteil, ohne einen Umbruch zu erzeugen und ohne etwas über den Inhalt auszusagen.

Der typische Einsatz

<p>Der Preis beträgt
   <span class="betrag">24,90&nbsp;&euro;</span>
   inklusive Versand.</p>

Der Betrag soll hervorgehoben werden – aber er ist nicht „wichtig" im Sinne der Sprache und nicht betont. Es geht rein um die Darstellung. Genau dafür ist span da.

Wann etwas anderes richtig ist

Sobald eine Aussage dahintersteckt, gibt es ein passendes Element:

<p><strong>Achtung:</strong> Die Frist endet
   <time datetime="2026-09-30">am 30. September</time>.
   Kürzel: <abbr title="Bürgerliches Gesetzbuch">BGB</abbr>.
   Eingabe: <code>git status</code></p>
  • strong – wichtig, dringlich
  • em – betont, sinnverändernd
  • time – ein Zeitpunkt, maschinenlesbar über datetime
  • abbr – Abkürzung mit Auflösung
  • code – Quelltext oder Eingabe
  • mark – hervorgehoben, weil es zur aktuellen Suche passt

Jedes davon ist ein span mit Bedeutung. Wer ein span mit einer Klasse namens wichtig versieht, hat sich für die bedeutungslose Fassung entschieden – und der Screenreader liest den Text unverändert vor.

Der Unterschied zwischen strong und b

Beide werden voreingestellt fett dargestellt, sagen aber Verschiedenes: strong bedeutet Wichtigkeit, b markiert lediglich abgesetzten Text ohne Begründung – etwa ein Schlüsselwort in einer Zusammenfassung. Im Zweifel ist strong richtig, weil die Absicht meist tatsächlich Wichtigkeit ist.

span und Zeilenumbrüche

Weil ein span im Textfluss steht, wirken Angaben für Breite, Höhe und senkrechte Abstände nicht wie erwartet. Wer beides braucht – Fluss und Maße –, setzt in CSS display: inline-block. Damit bleibt das Element in der Zeile und nimmt trotzdem Maße an.

Zu beachten bleibt: Auch ein span mit display: block darf keine Blockelemente enthalten. Der Validator prüft die Inhaltskategorie, nicht die Darstellung.