Das span-Element: Der Inline-Container
Das <span> ist das kleine Geschwister des div: ein Container ohne Bedeutung, nur eben inline. Es bleibt im Textfluss und umschließt einzelne Wörter oder Zeichen, meist um sie per CSS anders zu gestalten.
Syntax und Beispiel
HTML-Code
<p>Der Status ist <span class="status-ok">in Ordnung</span>.</p>Der Status ist in Ordnung.
Ohne CSS ist ein span unsichtbar, es ändert weder Aussehen noch Verhalten. Das bunte Logo oben auf dieser Seite ist übrigens genau so gebaut: ein span pro Buchstabengruppe, jedes mit eigener Farbe. Sehr 1998 und gleichzeitig völlig sauberes HTML.
Erst prüfen: Gibt es was Passenderes?
Wie beim div gilt: Bedeutung schlägt Neutralität. Für viele Fälle gibt es bereits ein Element das mehr aussagt:
| Du willst... | Nimm das |
|---|---|
| Wichtiges hervorheben | <strong>, siehe Absätze und Text |
| Betonung ausdrücken | <em> |
| Code im Text zeigen | <code> |
| Etwas wie mit Textmarker markieren | <mark> |
| Nur eine Stelle fürs CSS greifbar machen | dann ist <span> genau richtig |
Typische Fehler
- Ein span als Klickfläche mit JavaScript verdrahten. Für Klickbares gibt es button und a, die sind per Tastatur bedienbar, ein span nicht.
- Block-Inhalte in ein span packen. Als Inline-Element darf es keine Absätze oder Listen enthaltn, dafür ist das div da.
Ein ehrliches Praxisbeispiel
So sieht ein legitimer span-Einsatz aus, hier zum Auszeichnen einer fremdsprachigen Wendung samt Sprachwechsel für Screenreader:
<p>Die Franzosen nennen das
<span lang="fr">l'art pour l'art</span>,
Kunst um der Kunst willen.</p>Das lang-Attribut am span sorgt dafür, dass Vorlesesoftware die Stelle mit französischer Aussprache liest statt sie einzudeutschen. Kein anderes Element passt hier, der Text ist weder betont noch wichtig, er braucht nur einen Haken für das Attributt.
Die Prüffrage vor jedem span
Bevor du ein span setzt, geh einmal die Kandidatenliste durch: Ist es Betonung? Dann em. Wichtigkeit? strong. Code? code. Eine Änderung, ein Datum, eine Abkürzung? Auch dafür gibt es Elemente. Erst wenn alle durchgefallen sind, ist span dran. Diese Reihenfolge ist keine Pedanterie: Jedes bedeutungstragende Element ist eine Information mehr für Suchmaschinen, Screenreader und dein zukünftiges Ich beim Wiederlesen des Codes. Das span dagegen sagt der Welt nur "hier ist eine Stelle", mehr nichtt.
Verwandt: div · Block und Inline · Klassen und IDs