HTML-Tag „span”: Textbereiche anders formatieren

Von den vielen HTML-Elementen, denen Sie auf Ihrem Weg zur perfekten Webseite begegnen werden, ist „span“ eines der häufigsten. Im Gegensatz zu anderen Elementen erzeugt der <span>-Tag keinen speziellen Typ von Seitenelementen. Auf den ersten Blick mag dies verwirrend sein – wofür ist das Element <span> dann überhaupt da?

In der Tat hat es eine ganze Menge verschiedener Einsatzmöglichkeiten. Mit <span>-Elementen können Design- und Entwicklerteams das Styling und die Formatierung ihrer Webseiten und Inhalte präzise steuern. Wenn Sie wissen möchten, wie Webseiten aufgebaut sind, sollten Sie sich unbedingt mit dem <span>-Tag und seiner Verwendung vertraut machen.

In diesem Leitfaden beschreiben wir den Einsatz der <span>-Elemente in HTML. Wir zeigen, wie sie geschrieben werden, wofür sie gedacht sind (und wofür nicht), und geben einige Beispiele für die Tags in Aktion. Schließlich werden wir den Unterschied zwischen <span> und dem ähnlichen Element <div> erläutern.

Ein <span>-Tag wird mit einem öffnenden und einem schließenden Tag geschrieben:

 
<span>Hier kommt der Inhalt hin.</span>

Das <span>-Element wird als „generisch“ bezeichnet, weil der Name des Tags selbst nichts über den Inhalt des Elements aussagt. Anders ausgedrückt bedeutet <span> an sich nichts. Das Gegenteil eines generischen HTML-Elements ist ein semantisches HTML-Element, ein Element, dessen Name seinen Zweck beschreibt (z. B. <p> für einen Absatz, <button> oder <form>).

<span>-Tags sind auch „Inline“-Elemente. Das bedeutet, dass das Element in der aktuellen Zeile bleibt und keinen Zeilenumbruch erzeugt. Ein <div>-Tag, das andere generische HTML-Element, befindet sich auf Blockebene und erzeugt somit eine neue Zeile auf der Seite. Auf die Unterschiede zwischen <span> und <div> werden wir später noch näher eingehen.

Welche Funktion hat <span> in HTML?

Ein <span>-Tag hat für sich genommen keinen Einfluss auf die Darstellung der Seite.

Siehe das Pen-Beispiel „‚span‘-Tag ohne Attribute“ von Christina Perricone (@hubspot) auf CodePen

Die <span>-Tags sind jedoch sehr leistungsfähig, denn sie ermöglichen es uns, einem Textabschnitt oder einem anderen Inline-Seiteninhalt ein beliebiges globales HTML-Attribut zuzuweisen. Die häufigsten Attribute, die mit <span> verwendet werden, sind die Selektoren id und class, die genutzt werden, um ein Styling auf bestimmte Wörter anzuwenden.

Im Folgenden finden Sie einige Beispiele:

Siehe das Pen-Beispiel „Styling von Text mit ‚span‘“ von Christina Perricone (@hubspot) auf CodePen

Es ist auch möglich, CSS auf HTML-Elemente innerhalb von <span>-Tags anzuwenden, indem man die style-Attribute verwendet (auch als „Inline CSS“ bekannt). Inline-CSS sollte allerdings vermieden werden, da es damit schwieriger wird, seitenweite Stylingänderungen vorzunehmen.

Das <span>-Element kann auch andere Attribute aufnehmen. Wenn Sie z. B. einen Text in einer anderen Sprache als der des Dokuments haben, verpacken Sie diesen Text in einen <span>-Tag und fügen Sie ihm das lang-Attribut hinzu, um die vorübergehende Sprachänderung festzulegen. Dies erleichtert die Indexierung durch Suchmaschinen und weist Text-to-Speech-Programme an, diese Wörter anders auszusprechen.

Siehe das Pen-Beispiel ‚span‘-Tag mit ‚lang‘-Attribut“ von Christina Perricone (@hubspot) auf CodePen

Das <span>-Element eignet sich auch hervorragend dazu, einen Textabschnitt mit JavaScript-Funktionen zu versehen. Im folgenden Beispiel wird der Text innerhalb des Tags <span> ausgeblendet. Der JavaScript-Code zeigt diesen Text an, wenn Sie auf eine Schaltfläche klicken.

Siehe das Pen-Beispiel „Verwendung von ‚span‘ mit JavaScript“ von Christina Perricone (@hubspot) auf CodePen

Schließlich können wir <span> auch verwenden, um fetten und kursiven Text mit CSS zu erstellen. Allerdings ist es besser, den Tag <strong> für fettgedruckten Text und den Tag <em> (emphasis) für kursiven Text zu verwenden. Der Grund dafür ist, dass <strong>- und <em>-Tags semantische HTML-Elemente sind (der <span>-Tag dagegen nicht), wodurch Ihr Code für Bildschirmlesegeräte leichter zugänglich wird. Diese Optionen sehen auf den ersten Blick identisch aus:

Siehe das Pen-Beispiel „‚strong‘ und ‚em‘ vs. ‚span‘“ von Christina Perricone (@hubspot) auf CodePen

Wann immer möglich, sollten Sie zur besseren Zugänglichkeit prüfen, ob es eine semantisch bessere Alternative zum <span>-Tag gibt, bevor Sie ihn verwenden.

<span> vs. <div> in HTML

Wie <span> ist auch <div> ein generisches HTML-Element, das Sie überall auf Webseiten finden. Diese beiden Elemente dienen jedoch unterschiedlichen Zwecken. <span> ist ein generisches Inline-Element, während <div> ein generisches Element auf Blockebene ist.

Kurz zusammengefasst sind das hier die Hauptunterschiede zwischen <span>- und <div>-Elementen:

• Bei <div> wird nach dem schließenden Tag einen Zeilenumbruch eingefügt, was beim <span>-Tag nicht der Fall ist. Aus diesem Grund sind <div>-Tags sogenannte Blöcke, während <span>-Tags zu den Inline-Elemente gehören.
• Ein <div>-Element nimmt die gesamte Breite seines Containers ein, während das <span>-Element nur die Breite seines Inhalts hat. Die Breite und Höhe eines <div>-Elements kann mit CSS geändert werden, das funktioniert bei einem <span>-Element nicht.
• Im Allgemeinen werden <div>-Elemente verwendet, um Inhaltsabschnitte zu trennen. <span>-Tags dienen dazu, einen Textabschnitt innerhalb eines größeren Inhaltsabschnitts zu markieren.

Das folgende Beispiel zeigt zwei <div>-Tags und zwei <span>-Tags – beachten Sie die visuellen Unterschiede zwischen diesen Elementen:

Siehe das Pen-Beispiel „‚span‘ vs. ‚div 1‘“ von Christina Perricone (@hubspot) auf CodePen

Styling des Textes mit <span>-Tags

Wie wir gesehen haben, kann man mit den <span>-Tags eine Menge anstellen, solange man sie richtig anwendet. Ohne <span>- und <div>-Tags sähe das Internet recht anders (und ziemlich langweilig) aus. Mit diesen generischen Elementen können wir den Seiteninhalt bis hin zum einzelnen Absatz oder Wort stylen.

Ganz gleich, ob Sie die eine einzelne Textzeile hervorheben, dynamische Inhalte mit JavaScript hinzufügen oder einfach nur das Design Ihrer Website verbessern möchten: <span>-Tags sollten in Ihrem Werkzeugkasten – Sie werden sie gut gebrauchen können.

Titelbild: Maskot / iStock / Getty Images Plus