Tags & Elemente

Ein Tag ist eine Markierung in spitzen Klammern. Die meisten HTML-Elemente haben einen öffnenden Tag und einen schließenden Tag:

<p>Das ist ein Absatz.</p>

• <p> ist der öffnende Tag, er markiert den Anfang
• </p> ist der schließende Tag, er markiert das Ende (erkennbar am Schrägstrich /)
• “Das ist ein Absatz.” ist der Inhalt des Elements

Diese beiden Begriffe werden oft synonym verwendet, sind aber streng genommen unterschiedlich:

• Ein Tag ist die Markierung selbst: <p> oder </p>
• Ein Element ist das Gesamtpaket: öffnender Tag + Inhalt + schließender Tag

Element:     <p>Das ist ein Absatz.</p>
             ───  ─────────────────  ────
             Tag      Inhalt         Tag

Im Alltag sagt man meistens “das <p>-Element” und meint damit das Gesamtpaket. Das ist völlig in Ordnung, solange du weißt, dass es technisch einen Unterschied gibt.

Elemente können andere Elemente enthalten. Das nennt man Verschachtelung (Nesting):

<div>
  <h2>Überschrift</h2>
  <p>Ein Absatz mit <strong>fettem Text</strong> darin.</p>
</div>

Hier enthält das <div> zwei Kinder: eine <h2>-Überschrift und einen <p>-Absatz. Der Absatz enthält wiederum ein <strong>-Element. Diese Hierarchie aus Eltern, Kindern und Geschwistern ist fundamental für HTML.

Die goldene Regel der Verschachtelung

Elemente müssen in der umgekehrten Reihenfolge geschlossen werden, in der sie geöffnet wurden. Was zuerst geöffnet wird, wird zuletzt geschlossen:

<!-- Richtig: korrekt verschachtelt -->
<p>Text mit <strong>fettem</strong> Inhalt</p>

<!-- Falsch: überlappende Tags -->
<p>Text mit <strong>fettem</p> Inhalt</strong>

Stell dir Tags wie Klammern vor: Jede öffnende Klammer braucht eine schließende, und sie dürfen sich nicht überlappen.

Nicht alle Elemente haben Inhalt. Manche stehen allein: sie haben nur einen öffnenden Tag und keinen schließenden Tag. Diese nennt man Void-Elemente:

Zeile 1<br>
Zeile 2<br>
Zeile 3

<hr>

<img src="https://via.placeholder.com/200x50" alt="Beispiel">

Die häufigsten Void-Elemente:

Du kannst Void-Elemente auch als <br /> mit Schrägstrich schreiben. In HTML5 ist der Schrägstrich optional, beide Varianten sind gültig. Die Version ohne Schrägstrich (<br>) ist heute üblicher.

HTML-Elemente verhalten sich grundsätzlich auf zwei verschiedene Arten:

Block-Elemente nehmen die gesamte verfügbare Breite ein und beginnen auf einer neuen Zeile:

<h2>Eine Überschrift</h2>
<p>Ein Absatz</p>
<p>Noch ein Absatz</p>

Inline-Elemente nehmen nur so viel Platz ein wie ihr Inhalt und stehen in der gleichen Zeile:

<p>Text mit <strong>fettem</strong> und <em>kursivem</em> Wort.</p>

Mehr dazu erfährst du im Artikel Block vs. Inline.

HTML-Tags sind nicht case-sensitive: <P>, <p> und <P> funktionieren alle gleich. Die Konvention ist allerdings, immer Kleinbuchstaben zu verwenden:

<!-- Konvention: immer Kleinbuchstaben -->
<p>Guter Stil</p>

<!-- Funktioniert, aber unüblich -->
<P>Schlechter Stil</P>

Der Browser behandelt Leerzeichen, Tabs und Zeilenumbrüche im HTML-Quellcode besonders: Mehrere aufeinanderfolgende Whitespace-Zeichen werden zu einem einzigen Leerzeichen zusammengefasst:

<p>Viel      Abstand      hier?   Nein.</p>

Wie du siehst, werden die vielen Leerzeichen im Quellcode zu einem einzigen Leerzeichen in der Darstellung. Wenn du tatsächlich mehr Abstand brauchst, nutze CSS (margin, padding) statt zusätzlicher Leerzeichen.

Als Nächstes schauen wir uns Attribute an: die zusätzlichen Informationen, die du an Tags anhängen kannst.