HTML Span-Tag | Web-Entwicklungstutorials

Einführung

Das HTML -Tag wird verwendet, um Elemente zu gruppieren, um sie zu gestalten. Man kann es als generischen Container für die phrasing-Inhalte betrachten. Das -Tag ähnelt sehr dem <div>-Tag, unterscheidet sich jedoch dadurch, dass es ein Inline-Element ist, während <div> ein Block-Element ist. Das -Tag repräsentiert an sich nichts. In diesem Lab werden Sie lernen, wie Sie das -Tag verwenden, um Elemente zu gruppieren, um sie zu gestalten.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/head_elems -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/para_br -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/nav_links -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/doc_flow -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/access_cons -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/inter_elems -.-> lab-70839{{"Elemente mit HTML Span stylen"}} html/custom_attr -.-> lab-70839{{"Elemente mit HTML Span stylen"}} end

Hinzufügen des HTML-Codes

In der Datei index.html fügen Sie folgenden Code innerhalb des <body>-Tags hinzu:

<p>
  Dies ist ein <span>einfaches</span> Beispiel für die Verwendung des span-Tags.
</p>

Wir haben hier einen Absatz erstellt, wobei das Wort "einfaches" in das -Tag eingeschlossen ist. Dies wird uns helfen, die Verwendung dieses Tags praxisnah zu verstehen.

Styling des Span-Elements

Nun sehen wir uns an, wie man den Inhalt, der in das -Tag eingeschlossen ist, gestalten kann. Beispielsweise können wir die color-Eigenschaft in CSS verwenden, um der Wörter "einfaches" eine Farbe hinzuzufügen.

Fügen Sie folgenden CSS-Code innerhalb des <head>-Tags hinzu:

<style>
  span {
    color: rot;
  }
</style>

Dieser CSS-Code ändert die Farbe aller Inhalte, die in das -Tag eingeschlossen sind, in rot. Da wir das Wort "einfaches" in das -Tag eingeschlossen haben, wird es in roter Farbe gedruckt.

Verwenden von Span mit anderen HTML-Tags

Das -Tag kann auch mit anderen HTML-Elementen verwendet werden. Schauen wir uns an, wie Sie es mit dem <a>-Tag verwenden können.

Fügen Sie folgenden HTML-Code innerhalb des <body>-Tags hinzu:

<p>
  Dies ist ein <span><a href="#">Link</a></span
  >-Beispiel.
</p>

Dies erstellt einen Absatz, wobei das Wort "Link" in das -Tag eingeschlossen ist und auf die URL # verlinkt ist.

Styling des verknüpften Texts

Nun sehen wir uns an, wie wir den verknüpften Text stylen können. Fügen Sie folgenden CSS-Code innerhalb des <head>-Tags hinzu:

<style>
  span a {
    color: grün;
    text-decoration: none;
  }
</style>

Dieser CSS-Code setzt die Farbe des Texts innerhalb des <a>-Tags auf grün ohne Unterstrichung.

Hinzufügen von Ereignisattributen

Das -Tag unterstützt sowohl globale als auch Ereignisattribute. Schauen wir uns an, wie wir das globale Attribut class verwenden können, um Stile anzuwenden.

Fügen Sie das class-Attribut dem -Tag hinzu, das das Wort "einfaches" umschließt, wie unten gezeigt:

<p>
  Dies ist ein <span class="example"><a href="#">Link</a></span
  >-Beispiel.
</p>

Fügen Sie folgenden CSS-Code innerhalb des <head>-Tags hinzu:

<style>
  .example {
    font-size: 20px;
  }
</style>

Dieser CSS-Code erhöht die Schriftgröße des Inhalts innerhalb des -Tags, das die Klasse example hat.

Verwenden von Span-Tags für Semantik

Obwohl das -Tag keine inhärente Bedeutung hat, kann es verwendet werden, um die Semantik des umschlossenen Texts zu vermitteln. Beispielsweise könnten Sie es verwenden, um ein Datum oder einen Prozentsatz zu umschließen, um anzuzeigen, dass der Text darin eine besondere Bedeutung hat.

Fügen Sie beispielsweise folgenden Code zur index.html-Datei hinzu:

<p>Meine Endnote ist <span class="score" aria-label="90 Prozent">90</span>.</p>

In diesem Beispiel ist 90 in das -Tag eingeschlossen und erhält einen Klassenamen score. Dadurch haben wir vermittelt, dass der Text innerhalb des -Tags eine besondere Bedeutung hat. Darüber hinaus haben wir das aria-label-Attribut hinzugefügt, um Zugänglichkeitsinformationen für einen Bildschirmleser bereitzustellen.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML -Tag verwenden, um Elemente zu gruppieren, um sie zu stylen. Sie haben auch gelernt, wie Sie den Inhalt, der in das -Tag eingeschlossen ist, stylen, wie Sie es mit anderen HTML-Tags verwenden, wie Sie globale und Ereignisattribute verwenden und wie Sie das -Tag verwenden, um Semantik zu vermitteln.