HTML-Tags
Was ist ein HTML-Tag: öffnende und schließende Tags, Unterschied zwischen Tags, Elementen und Attributen, Void-Elemente und Verschachtelungsregeln.
Ein HTML-Tag ist ein Schlüsselwort (ein Tag-Name), das in spitze Klammern eingeschlossen ist, wie <p> oder <img>. Tags sind die Bausteine von HTML: Sie teilen dem Browser mit, wo ein Inhalt beginnt und endet und welcher Art der Inhalt ist. Der Browser liest die Tags und baut die Seite daraus auf, zeigt die Tags selbst jedoch nie an.
Diese Seite erklärt, was ein Tag ist, wie sich ein öffnendes Tag von einem schließenden Tag unterscheidet, wie Tags zu Elementen mit Attributen kombiniert werden, welche Tags allein stehen (Void-Elemente) und welche Regeln für das korrekte Verschachteln von Tags gelten.
Öffnende und schließende Tags
Die meisten Tags kommen paarweise vor: ein öffnendes Tag und ein schließendes Tag. Das schließende Tag ist identisch mit dem öffnenden Tag, beginnt aber mit einem Schrägstrich (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- Das öffnende Tag markiert den Beginn des Inhalts.
- Das schließende Tag markiert das Ende des Inhalts.
Alles zwischen den beiden Tags ist der Inhalt, auf den die Tags angewendet werden.
Tag vs. Element vs. Attribut
Diese drei Begriffe werden häufig verwechselt, daher ist es hilfreich, sie genau zu definieren.
- Ein Tag ist das geklammerte Schlüsselwort für sich allein —
<p>oder</p>. - Ein Element ist die vollständige Einheit: das öffnende Tag, der Inhalt und das schließende Tag zusammen.
- Ein Attribut ist eine zusätzliche Information, die im öffnenden Tag platziert wird und das Element konfiguriert.
Hier ist ein einzelnes Absatz-Element in seine Teile zerlegt:
<p class="intro">Hello world</p>| Teil | Was es ist |
|---|---|
<p ...> | das öffnende Tag |
class="intro" | ein Attribut (Name class, Wert "intro") |
Hello world | der Inhalt |
</p> | das schließende Tag |
| die gesamte Zeile | das Element |
<p> ist also ein Tag, während <p>Hello world</p> ein Element ist. Weitere Informationen finden Sie unter HTML-Elemente und HTML-Attribute.
Beispiel eines vollständigen Elements
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Void-Elemente (leere Elemente)
Einige Elemente haben keinen Inhalt und daher kein schließendes Tag. Diese werden als Void-Elemente (oder leere Elemente) bezeichnet. Sie bestehen aus einem einzigen Tag.
Die häufigsten Void-Elemente sind:
<br>— ein Zeilenumbruch<hr>— ein thematischer Trenner (horizontale Linie)<img>— ein Bild<input>— ein Formularfeld
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">In HTML schreibt man ein Void-Element als einzelnes Tag ohne Schrägstrich, z. B. <br>. Die selbstschließende Form <br /> wird ebenfalls akzeptiert und ist in XHTML erforderlich, in HTML jedoch optional.
Tags unterscheiden nicht zwischen Groß- und Kleinschreibung
HTML-Tag-Namen unterscheiden nicht zwischen Groß- und Kleinschreibung: <P>, <p> und <P> bedeuten alle dasselbe. Konventionell werden Tags jedoch in Kleinbuchstaben geschrieben, was dem empfohlenen Stil entspricht.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Tags korrekt verschachteln
Tags können andere Tags enthalten. Wenn das der Fall ist, müssen sie korrekt verschachtelt sein: Ein inneres Element muss vollständig innerhalb seines übergeordneten Elements geöffnet und geschlossen werden. Tags dürfen sich nicht überlappen.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>Im falschen Beispiel wird <em> innerhalb von <p> geöffnet, aber außerhalb davon geschlossen. Browser versuchen, sich von solchen Fehlern zu erholen, aber das Ergebnis ist unvorhersehbar — schließen Sie daher immer zuerst das innerste Tag.
Für Anmerkungen, die der Browser ignoriert anstatt sie anzuzeigen, siehe HTML-Kommentare.
Historische Anmerkung: In den 1990er Jahren umschlossen Autoren manchmal Skript-Inhalte mit HTML-Kommentarzeichen, um sie vor sehr alten Browsern zu verbergen, die
<script>nicht verstanden. Diese Technik ist veraltet und sollte heute nicht mehr verwendet werden.