HTML verwendet zwei Arten von Tags: Paartags und Einzel-Tags (selbstschließende Tags). Beide erfüllen unterschiedliche Aufgaben bei der Strukturierung einer Webseite.

Paartags

Paartags bestehen aus einem öffnenden und einem schließenden Tag. Sie umschließen Inhalte, gruppieren Elemente und definieren Bedeutung oder Struktur.

Syntax:

<tag_name>Some content</tag_name>

Hier ist ein konkretes Beispiel für die Verwendung von Paartags:

In diesem Beispiel:

• <section>...</section>: gruppiert zusammengehörige Inhalte;
• <h1>...</h1>: fügt eine Überschrift für den Abschnitt hinzu;
• <p>...</p>: enthält einen Absatz, der erklärt, dass die meisten HTML-Tags paarweise auftreten.

Einzelne Tags

Einzelne Tags besitzen keinen schließenden Tag. Sie werden verwendet, wenn kein innerer Inhalt benötigt wird und das gesamte Verhalten über Attribute definiert wird.

Syntax:

<tag_name />

Hier ist ein praktisches Beispiel für die Verwendung einzelner Tags:

Dieser Code enthält zwei Elemente:

• <input />: erzeugt ein Texteingabefeld. Das Attribut placeholder=" name" zeigt einen Hinweis im Feld an;
• <img />: zeigt ein Bild von Früchten an.
  • alt="Fruits": Text, der angezeigt wird, falls das Bild nicht geladen werden kann;
  • width und height: legen die Bildabmessungen fest;
  • src: gibt die Bild-URL an.

Verschachtelung von Tags

Tags müssen korrekt verschachtelt werden, ähnlich wie Matroschka-Puppen, wobei jedes schließende Tag dem entsprechenden öffnenden Tag in der richtigen Reihenfolge zugeordnet wird.

Hier ist ein Beispiel für verschachtelte Tags:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Betrachten wir das nächste gültige Beispiel:

Dieser Code zeigt einen Absatz mit einem Link und hervorgehobenem Text an:

• <p>...</p>: umschließt den gesamten Absatz;
• <a href="https://privacy.com">...</a>: erstellt einen anklickbaren Link zur Datenschutzrichtlinie;
• <strong>...</strong>: hebt das Wort "website" fett hervor.