Tags & Elemente

Zuletzt aktualisiert am 3. Februar 2026

Tags sind die grundlegenden Bausteine von HTML. Sie markieren Anfang und Ende eines Elements und sagen dem Browser, was der Inhalt dazwischen bedeutet. Auf dieser Seite lernst du, wie Tags aufgebaut sind, was der Unterschied zwischen einem Tag und einem Element ist und welche Sonderfälle es gibt.

Was ist ein Tag?

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

Tag vs. Element

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.

Verschachtelung

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.

Void-Elemente (selbstschließende Elemente)

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.

Block- vs. Inline-Elemente

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.

Groß- und Kleinschreibung

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>

Whitespace in HTML

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.

Häufige Fehler

• Schließenden Tag vergessen: <p>Text ohne </p>. Der Browser versucht das zu reparieren, aber das Ergebnis ist nicht immer das, was du erwartest.
• Falsche Verschachtelung: <strong><em>Text</strong></em>. Die Tags überlappen sich. Richtig wäre: <strong><em>Text</em></strong>.
• Void-Elemente schließen: <br></br> oder <img ...></img>. Void-Elemente haben keinen schließenden Tag. Das führt manchmal zu doppelten Elementen.
• Inline in Block verwechseln: Ein <p> innerhalb eines <span> ist ungültig, da ein Block-Element nicht in einem Inline-Element stehen darf.

Zusammenfassung

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