HTML <span> Tag
Das HTML <span>-Tag ist ein generischer Inline-Container ohne semantische Bedeutung, der Text formatiert oder per Skript anspricht.
Das HTML-Tag <span> ist ein generischer Inline-Container für einen Textabschnitt oder Inhalt. Im Gegensatz zu den meisten HTML-Elementen besitzt es keine semantische Bedeutung — es teilt Browser und Hilfstechnologien nichts darüber mit, was der Inhalt ist. Seine einzige Aufgabe besteht darin, einen Bereich von Inline-Inhalt zu markieren, damit er per CSS oder JavaScript gezielt angesprochen werden kann.
Da es keine Bedeutung hinzufügt, sollte <span> Ihr letztes Mittel sein, nicht das erste. Wann immer ein semantisches Element zum Inhalt passt, greifen Sie stattdessen darauf zurück:
| Wenn der Text… | Verwenden Sie dies, nicht <span> |
|---|---|
| betont ist | <em> |
| wichtig / stark hervorgehoben ist | <strong> |
| markiert / relevant ist | <mark> |
| eine Abkürzung ist | <abbr> |
| Code ist | <code> |
| ein Datum oder eine Uhrzeit ist | <time> |
Verwenden Sie <span> nur, wenn kein semantisches Inline-Element passt und Sie lediglich einen Styling- oder Scripting-Hook benötigen — zum Beispiel, um ein einzelnes Wort einzufärben, ein Zeichen für einen Initialbuchstaben-Effekt zu umschließen oder ein dekoratives Icon zu beschriften.
Semantische Elemente bevorzugen
Die zwei folgenden Codeausschnitte sehen im Browser identisch aus, sind aber nicht gleichwertig. Das erste verwendet ein <span> mit einem Inline-Style; das zweite verwendet <mark>, das Screen-Readern und Suchmaschinen tatsächlich übermittelt: „Dieser Text ist als relevant hervorgehoben."
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>Wenn Sie nur einen Hook für das Styling benötigen und es keine semantische Entsprechung gibt, ist <span> das richtige Werkzeug. Wenn das Styling jedoch Bedeutung widerspiegelt, wählen Sie das Element, das diese Bedeutung trägt.
<span> vs. <div>
<span> und <div> sind die zwei „bedeutungslosen" generischen Container in HTML. Der Unterschied liegt in der Box, die sie erzeugen:
<span>ist inline — es fließt innerhalb einer Textzeile und nimmt nur die Breite seines Inhalts ein. Es darf keine Block-Level-Elemente enthalten.<div>ist block-level — es beginnt auf einer neuen Zeile und erstreckt sich über die volle Breite seines Elternelements. Verwenden Sie es, um größere Abschnitte zu gruppieren.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Faustregel: Verwenden Sie <span> für einen Teil einer Zeile und <div> für einen Inhaltsblock.
Syntax
Das <span>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<span>) und dem schließenden (</span>) Tag geschrieben.
Im folgenden Beispiel wenden wir direkt innerhalb des Tags einen Style an.
Beispiel des HTML-Tags <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Sehen wir uns ein weiteres Beispiel an, bei dem wir dem Tag ein class-Attribut hinzufügen und die Stile separat in einem Stylesheet anwenden. Dadurch entsteht ein Initialbuchstabe — ein übergroßer erster Buchstabe, ein klassisches typografisches Element für den Beginn eines Kapitels.
Beispiel des HTML-Tags <span> mit dem class-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Barrierefreiheits-Anwendungsfälle
Zwei Muster machen <span> für die Barrierefreiheit wirklich nützlich.
Nur für Screen-Reader sichtbarer Text. Eine visually-hidden-Klasse verbirgt Text vor dem Bildschirm, macht ihn aber für Screen-Reader verfügbar. Dies ist die Standardmethode, um Kontext bereitzustellen, den sehende Benutzer allein aus dem Layout entnehmen.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Icons beschriften. Icon-Fonts und dekorative Glyphen haben keinen Text, den ein Screen-Reader vorlesen könnte. Verbergen Sie das dekorative <span> mit aria-hidden und vergeben Sie einen zugänglichen Namen mit aria-label am Link oder Button.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Hier entfernt aria-hidden="true" das visuelle „×" aus dem Accessibility-Baum, während aria-label der Hilfstechnologie mitteilt, dass der Button „Close dialog" bedeutet.
Attribute
<span> hat keine eigenen Attribute. In der Praxis übernehmen diese globalen Attribute fast die gesamte Arbeit:
| Attribut | Zweck |
|---|---|
class | Verknüpft das Element mit einer oder mehreren CSS-Regeln. |
id | Gibt einen eindeutigen Bezeichner für die CSS- oder JavaScript-Zuweisung. |
style | Wendet CSS direkt als Inline-Style an (praktisch für einmalige Formatierungen). |
lang | Kennzeichnet einen Textabschnitt als andere Sprache, z. B. <span lang="fr">. |
Das Tag unterstützt auch die Event-Attribute, sodass Sie auf Benutzeraktionen wie Klicks oder Hover-Effekte reagieren können. Ein Event tritt auf, wenn der Browser auf eine Benutzeraktion reagiert — Mausklick, Videowiedergabe, Formularübermittlung und so weiter.