<span>

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?

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.

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

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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.

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Komplett

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett