Wie wird HTML in eine Webseite umgewandelt?

Der Prozess der Umwandlung von HTML in eine Webseite umfasst mehrere Hauptphasen:

HTML-Parsing:
- Der Browser liest den HTML-Code und baut einen Objektbaum — DOM (Document Object Model).
- Das DOM stellt die Dokumentenstruktur in Form von Knoten (Elemente, Attribute, Text) dar.
CSS-Parsing:
- Der Browser liest die CSS-Stile (extern, intern, inline).
- Es wird ein Stilbaum — CSSOM (CSS Object Model) — erstellt.
Erstellung des Renderbaums:
- DOM und CSSOM werden kombiniert.
- Es entsteht ein Baum von Objekten, der visuelle Informationen enthält (welche Elemente sichtbar sind und wie sie aussehen sollen). Elemente mit display: none erscheinen im Renderbaum nicht.
Layout (Reflow):
- Die genauen Koordinaten und Größen jedes Elements im Renderbaum werden berechnet.
- Elemente werden neu angeordnet, wenn sich ihre Größen oder Positionen ändern (z.B. bei Fenstergrößenänderung oder Content-Addition).
Painting:
- Die Pixel werden auf dem Bildschirm sichtbar gemacht, basierend auf den Informationen aus dem Renderbaum und den Layout-Ergebnissen.
- Das Rendering erfolgt schichtweise (Hintergrund, Rahmen, Inhalt).
Compositing:
- Verschiedene Render-Schichten werden in der richtigen Reihenfolge überlagert, um das endgültige Bild der Seite zu erstellen.

Diese Schritte werden sequenziell ausgeführt, aber einige können sich wiederholen (z.B. Layout und Painting bei DOM- oder Stiländerungen nach dem Laden).

<!-- Beispiel eines einfachen HTML5-Dokuments -->
<!DOCTYPE html>
<html>
<head>
    <title>Beispielseite</title>
    <style>
        /* Beispiel CSS-Stile */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hallo, Welt!</h1> <!-- Element, das zum DOM und Renderbaum hinzugefügt wird -->
    <p style="display: none;">Dieser Text ist versteckt.</p> <!-- Element im DOM, aber nicht im Renderbaum -->
</body>
</html>

/* Beispiel CSSOM für die Stile des HTML-Beispiels */
/* Repräsentiert die Stilstruktur */
h1 {
    color: blue;
}

Der Browser analysiert HTML und CSS, baut interne Modelle, berechnet die Anordnung der Elemente und rendert sie auf dem Bildschirm.