HTML <span>-Tag
Das HTML <span>-Tag wird verwendet, um einen kleinen Inhalts- oder Textbereich innerhalb eines größeren Dokuments zu definieren, der anders als der umgebende Text gestaltet werden soll. Es handelt sich um ein Inline-Element, das verwendet werden kann, um Stile wie Farbe oder Schriftart auf einen bestimmten Textabschnitt anzuwenden.
Das <span>-Tag hat an sich keine semantische Bedeutung, kann aber in Verbindung mit anderen Tags wie <div> oder <p> verwendet werden, um bestimmten Inhaltsbereichen zusätzliches Styling oder Funktionalität hinzuzufügen. Es ist ein nützliches Werkzeug für Webdesigner und Entwickler, die kleine Anpassungen am Text vornehmen möchten, ohne die Gesamtstruktur der Seite zu verändern.
Beispielsweise können Sie das <span>-Tag verwenden, um ein bestimmtes Wort innerhalb eines Absatzes hervorzuheben oder einer einzelnen Zeichen eine andere Schriftgröße zuzuweisen. Das <span>-Tag kann auch mit CSS kombiniert werden, um Hover-Effekte, Animationen und andere dynamische Funktionen auf einer Webseite zu erstellen.
Das <span>-Tag ähnelt dem <div>-Tag, weist jedoch einige Unterschiede auf. Während das HTML <span>-Tag verwendet wird, um einen kleinen Inhalts- oder Textbereich innerhalb eines größeren Dokuments zu definieren, der anders als der umgebende Text gestaltet werden soll, wird das <div>-Tag verwendet, um einen größeren Abschnitt oder Block von Inhalten zu definieren, der andere HTML-Elemente enthalten kann. Das <div>-Tag ist ein Container-Element, das häufig verwendet wird, um verwandte Inhalte zu gruppieren und dem gesamten Block Styling hinzuzufügen. Es handelt sich um ein Block-Element, was bedeutet, dass es die volle Breite seines übergeordneten Containers einnimmt und vor und nach dem Element einen Zeilenumbruch erzwingt.
Syntax
Das <span>-Tag wird immer in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<span>) und dem schließenden (</span>)-Tag geschrieben.
Im folgenden Beispiel wenden wir einen Stil direkt innerhalb des Tags an.
Beispiel für das HTML <span>-Tag:
Ein Beispiel für ein HTML <span>-Tag
<!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, in dem wir dem Tag ein class-Attribut hinzufügen und den Stilen für den Inhalt separat anwenden.
Beispiel für das HTML <span>-Tag mit dem class-Attribut:
Ein Beispiel für ein HTML <span>-Tag mit dem class-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Font size in percents */
position: relative; /* Relative positioning */
top: 7px; /* Move from above */
}
</style>
</head>
<body>
<p>
<span class="letter">О</span>
She 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>Attribute
Das <span>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Globale Attribute beziehen sich auf Attribute, die auf jedem HTML-Element verwendet werden können. Diese Attribute sind für alle Elemente in HTML gemeinsam.
Ein Ereignis tritt auf, wenn ein Browser auf eine bestimmte Benutzeraktion reagiert. Der Benutzer löst ein Ereignis aus, indem er auf eine Maus klickt, ein Video abspielt, ein Dokument oder ein Bild hochlädt oder eine andere Aktion auf der Website ausführt.
Praxis
Wie ist die korrekte Verwendung des HTML span-Tags?