HTML- Element

Ein HTML-Dokument besteht aus einer Reihe von HTML-Elementen, die die Grundlage der Struktur von Webseiten bilden.

Was ist ein HTML-Element?

HTML-Elemente sind vonStart-TagbisEnd-Tagdie vollständige Struktur dazwischen.

Start-Tag Elementinhalt End-Tag
<p> Dies ist ein Absatz </p>
<a href="default.htm.html"> Dies ist ein Link </a>
<br> Zeilenumbruch (leeres Element) Keine

Beschreibung:

  • Start-Tag wird auchöffnendes Tag genannt
  • End-Tag wird auchschließendes Tag genannt

Syntaxregeln für HTML-Elemente

  • Ein Element beginnt mitStart-Tagbeginnt mitEnd-TagEnde
  • Der Inhalt eines Elements befindet sich zwischen dem öffnenden Tag und dem schließenden Tag.
  • Einige Elemente sindleere Elemente, ohne Inhalt
  • Leere Elemente sind normalerweise im öffnenden Tag selbstschließend (z. B.,<br />）
  • Die meisten Elemente könnenAttribute enthalten

Tipp:Attribute werden in späteren Kapiteln ausführlich eingeführt.

Verschachtelung von HTML-Elementen

HTML-Elemente können ineinander verschachtelt werden und bilden dabei eine baumartige Struktur:

  • Ein Element kann andere Elemente enthalten
  • Ein HTML-Dokument ist im Wesentlichen eine verschachtelte Struktur (DOM-Baum).

Beispiel für ein HTML-Dokument

<!DOCTYPE html>
<html>

  <body>
<p>Dies ist der erste Absatz.</p>
  </body>

</html>

Das Beispiel enthält 3 Kernelemente:html、body、p。

Beispielanalyse

<p>-Element (Absatz)

<p>Dies ist der erste Absatz.</p>

Definiert einen Absatz, der Textinhalt enthält.

<body>-Element (body)

<body>
<p>Dies ist der erste Absatz.</p>
</body>

Definiert den Hauptinhalt der Seite und kann mehrere untergeordnete Elemente enthalten.

<html>-Element (Wurzelelement)

<html>

  <body>
<p>Dies ist der erste Absatz.</p>
  </body>

</html>

Der Wurzelknoten des gesamten HTML-Dokuments; alle Inhalte müssen darin enthalten sein.

Über das End-Tag

In manchen Fällen ergänzt der Browser fehlende schließende Tags automatisch:

<p>Dies ist ein Absatz
<p>Dies ist ein weiterer Absatz

Obwohl es normal angezeigt werden kann,wird davon abgeraten, sich auf dieses Verhalten zu verlassen, was Folgendes verursachen kann:

  • Defekte Struktur
  • Stil-Anomalien
  • Kompatibilitätsprobleme

Leere HTML-Elemente

Leere Elemente sind Elemente ohne Inhalt, zum Beispiel:

  • <br>(Zeilenumbruch)
  • <img>(Bild)
  • <input>(Eingabefeld)

Empfohlene Syntax:

<br />

Diese Syntax ist mit HTML, XHTML und XML kompatibel und stärker standardisiert.

Best Practice: Tags in Kleinbuchstaben verwenden

HTML-TagGroß-/Kleinschreibung wird nicht unterschieden, aber empfohlen:

  • Verwenden Sie einheitlichkleingeschriebene Tags
  • Entspricht den W3C-Spezifikationen
  • Verbessert die Lesbarkeit und Konsistenz des Codes
Weitere Erweiterungen