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>Ergebnis (mit passendem CSS)
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.
Verwandt: div · Block und Inline · Klassen und IDs