HTML-Elemente

Sie kennen bereits das grundlegende Dokumentgerüst. Diese Lektion zoomt auf die Bausteine innerhalb der Seite: HTML-Elemente. Jede Überschrift, jeder Absatz und die meisten anderen Teile einer Seite sind Elemente.

Was ist ein HTML-Element?

Ein HTML-Element ist eine vollständige Markup-Einheit. Für die meisten Elemente, die Inhalt umschließen, gibt es drei Teile:

1. Ein Start-Tag — zum Beispiel <p>
2. Der Inhalt — Text oder verschachtelte Elemente darin
3. Ein End-Tag — zum Beispiel </p>
   Zusammen ist <p>Hallo</p> ein Absatzelement.

Direkte Antwort

Ein HTML-Element bedeutet meist ein Start-Tag, optionalen Inhalt und ein passendes End-Tag. Der Browser nutzt dieses Paar, um zu wissen, wo das Element beginnt und endet. Manche leeren Elemente umschließen keinen Inhalt und haben daher kein separates End-Tag.

Das Beispiel lesen

• <p> öffnet ein Absatzelement
• Der Text zwischen den Tags ist der Inhalt
• </p> schließt den Absatz
• Die Überschrift funktioniert ebenso mit <h1> und </h1>

Verschachtelte Elemente

Elemente können in anderen Elementen liegen. Das heißt Verschachtelung. Das innere Element muss vollständig geöffnet und geschlossen werden, bevor das äußere schließt.

Hier ist das strong-Element im p-Element verschachtelt. Verschachtelung markiert Bedeutung innerhalb größerer Inhaltsstücke. Halten Sie den Baum sauber: überlappen Sie Tags nicht, indem Sie p öffnen, strong öffnen und dann p vor strong schließen.

Leere (void) Elemente

Manche Elemente umschließen keinen Inhalt. Man nennt sie oft leer oder void. Ein häufiges Anfängerbeispiel ist der Zeilenumbruch:

Das <br>-Tag erzeugt einen Zeilenumbruch. Es hat kein separates schließendes Tag und keinen inneren Text. Später treffen Sie andere leere Elemente wie Bilder. Merken Sie sich jetzt: Nicht jedes Element sieht wie ein Start-Inhalt-Ende-Sandwich aus.

Tags vs. Elemente

Manchmal werden „Tag“ und „Element“ gleichgesetzt. Ein Tag ist das Markup in spitzen Klammern. Ein Element ist die ganze Einheit, die der Browser versteht — oft Start-Tag + Inhalt + End-Tag. „Das p-Element“ meint meist die vollständige Absatzeinheit.

Selbst ausprobieren

1. Öffnen Sie Ihre grundlegende HTML-Datei
2. Fügen Sie einen Absatz mit verschachteltem strong-Text hinzu
3. Fügen Sie einen zweiten Absatz hinzu, der <br> zwischen zwei kurzen Zeilen nutzt
4. Speichern und Browser aktualisieren
5. Prüfen Sie, dass Fettschrift und Zeilenumbruch wie erwartet erscheinen

Häufige Fehler

• Das schließende Tag für Elemente vergessen, die eines brauchen
• Tags überlappen statt sauber zu verschachteln
• Jedes Tag so behandeln, als müsste es Inhalt und End-Tag haben (leere Elemente unterscheiden sich)
• Falscher Schließname, z. B. </p> mit <h1> paaren
• Sichtbaren Seiteninhalt außerhalb von body legen

Zusammenfassung

• Die meisten HTML-Elemente nutzen Start-Tag, Inhalt und End-Tag
• Verschachtelte Elemente müssen in der richtigen Reihenfolge schließen
• Leere Elemente wie br umschließen keinen Inhalt
• Ein Tag ist die geklammerte Markierung; ein Element die volle Einheit
• Üben Sie Verschachtelung und einen einfachen Zeilenumbruch
• Attribute, die Tags Extra-Informationen geben, kommen in der nächsten Lektion