Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur

Der Zweck der Verwendung von HTML zum Markieren von Inhalten besteht darin, Webseiten Semantik zu verleihen. Mit anderen Worten geht es darum, dem Inhalt Ihrer Webseite eine Bedeutung zu verleihen, die der Benutzeragent verstehen kann.

HTML gibt eine Reihe von Tags an, um Inhalte auf unterschiedliche Weise zu markieren. Jedes Tag ist eine Beschreibung seines Inhalts. Das am häufigsten verwendete HTML beschreibt Überschriften, Absätze, Links und Bilder. Aktuell verfügt HTML über insgesamt 114 Tags, doch nach dem 80/20-Prinzip können mit etwa 25 davon bereits 80 % des Kennzeichnungsbedarfs gedeckt werden.

Die neueste HTML-Version, HTML5, definiert eine neue Reihe struktureller Tags, um Tags mit verwandtem Inhalt zu gruppieren und so die Gesamtstruktur von Webseiten besser zu regeln. Zu diesen neuen Tags gehören <header>, <nav> (Navigation), <article>, <section>, <aside> und <footer>.

1. Tag-Verschluss

Für jedes Element, das Inhalt enthält (wie Überschriften, Absätze und Bilder), gibt es zwei verschiedene Möglichkeiten, es zu kennzeichnen: eine mit einem geschlossenen Tag und die andere mit einem offenen Tag, je nachdem, ob es sich bei dem enthaltenen Inhalt um Text handelt oder nicht.

1.1 Textschließendes Tag

Beispiel: <h1>Hallo, CSS!</h1>
1.2 Verwenden Sie selbstschließende Tags für zitierte Inhalte

Beispiel: <img src="images/dog.jpg" alt="Das ist mein Hund." >

Hinweis:
Für selbstschließende Tags erfordert XHTML, dass sie wie folgt geschrieben werden:

In HTML5 können Sie den letzten schließenden Schrägstrich weglassen und schreiben:

2. Attribute

Tipp: Bildschirmleseprogramme, die von sehbehinderten Benutzern verwendet werden, lesen den Inhalt des Alt-Attributs laut vor. Geben Sie daher unbedingt das Tag
Das Alt-Attribut fügt Inhalt hinzu, der dem Zuhörer (oder Leser) sofort klar ist.

3. Überschriften und Absätze
4. Verbundelemente

HTML spezifiziert nicht nur grundlegende Inhalts-Tags wie Titel, Bilder und Absätze, sondern auch Tags zum Erstellen von Listen,
Markup für komplexe Benutzeroberflächenkomponenten wie Tabellen und Formulare. Diese sind sogenannte zusammengesetzte Elemente, d. h. sie bestehen aus mehreren
Etiketten zusammen.

5. Verschachtelte Tags

Vereinfacht ausgedrückt geht es dabei darum, ein Tag in ein anderes Tag zu verschachteln.
6. HTML5-Vorlagen

7. Blockelemente und Inline-Elemente

Dokumentflusseffekt: HTML-Elemente fließen vom oberen zum unteren Rand der Seite in der Reihenfolge, in der sie in der Auszeichnung erscheinen.

Fast alle HTML-Elemente verfügen über ein Anzeigeattribut vom Typ „Block“ oder „Inline“. Die offensichtlichste Ausnahme ist das Tabellenelement, das über einen eigenen speziellen Anzeigewert verfügt.

Elemente auf Blockebene (wie Überschriften und Absätze) werden auf der Seite übereinander gestapelt, wobei jedes Element eine eigene Zeile einnimmt. Inline-Elemente (wie Links und Bilder) werden nebeneinander angezeigt und nur dann in die nächste Zeile umgebrochen, wenn nicht genügend Platz vorhanden ist, um sie nebeneinander anzuzeigen.

Unabhängig davon, welches HTML-Element Sie verstehen möchten, sollten Sie sich zunächst fragen: Handelt es sich um ein Blockelement oder ein Inline-Element? Wenn Sie dies wissen, können Sie beim Schreiben Ihres Markups vorhersehen, wie ein Element zunächst positioniert wird, sodass Sie planen können, wie Sie es in Zukunft mit CSS neu positionieren.

Es gibt zwei Dinge, die Sie wissen sollten:

Elementfelder auf Blockebene werden auf die gleiche Breite wie ihr übergeordnetes Element erweitert.

Inline-Elementboxen verpacken ihren Inhalt in Schrumpffolie und versuchen, die Verpackung so dicht wie möglich zu gestalten.

7. Verschachtelte Elemente

In der Auszeichnung sind HTML-Tags verschachtelt, und auf dem Bildschirm sind Kästchen verschachtelt.
8. Dokumentobjektmodell

Das Document Object Model (DOM) beobachtet die Elemente der Seite und die Attribute jedes Elements aus der Perspektive des Browsers und leitet daraus einen Stammbaum dieser Elemente ab. Durch das DOM können Sie die Beziehung zwischen Elementen bestimmen. Referenzieren des DOM in CSS
Durch Klicken auf eine bestimmte Stelle im HTML-Element können Sie das entsprechende HTML-Element auswählen und dessen Style-Attribute ändern.

Der Prozess der CSS-Manipulation des DOM besteht darin, zuerst ein Element oder eine Gruppe von Elementen auszuwählen und dann die Eigenschaften dieser Elemente zu ändern. Wenn Sie ein Element über CSS ändern, beispielsweise die Breite ändern oder ein Pseudoelement in das Markup einfügen, werden diese Änderungen sofort im DOM und auf der Seite widergespiegelt.

Kurz gesagt wird das DOM durch HTML-Markup erstellt und anschließend wird CSS verwendet, um das DOM zu ändern, wenn die Seite zum ersten Mal geladen wird und wenn der Benutzer mit der Seite interagiert.