Hogyan alakul HTML weboldallá?

A HTML átalakításának folyamata több fő lépést foglal magában:

HTML elemzés:
- A böngésző beolvassa a HTML kódot és létrehoz egy objektumfát — DOM (Dokumentum Objektum Modell).
- A DOM a dokumentum szerkezetét reprezentálja csomópontok (elemek, attribútumok, szöveg) formájában.
CSS elemzés:
- A böngésző beolvassa a CSS stílusokat (külső, belső, inline).
- Létrejön a stílusfa — CSSOM (CSS Objektum Modell).
A renderelési fa (Render Tree) építése:
- A DOM és a CSSOM összevonásra kerül.
- Létrejön egy objektumfa, amely vizuális információkat tartalmaz (mely elemek láthatóak és hogyan kell kinézniük). A display: none-al rendelkező elemek nem jelennek meg a Render Tree-ben.
Elrendezés (Layout / Reflow):
- Minden elem pontos koordinátái és méretei kiszámításra kerülnek a Render Tree-ben a képernyőn.
- Az elemek újra elhelyezkednek, ha méretük vagy pozíciójuk változik (pl. ablakméret változása vagy tartalom hozzáadása esetén).
Festés (Painting):
- A pixelek vizuálisan megjelennek a képernyőn, a Render Tree és a layout eredményei alapján.
- A festés rétegeken történik (háttér, szegély, tartalom).
Összeállítás (Compositing):
- A különböző renderelési rétegek a megfelelő sorrendben kerülnek egymásra, hogy a végső kép kialakuljon.

Ezek a lépések szekvenciálisan hajtódnak végre, de néhány ismétlődhet (pl. layout és festés DOM vagy stílusok módosítása után).

<!-- Egyszerű HTML5 dokumentum példája -->
<!DOCTYPE html>
<html>
<head>
    <title>Példa oldal</title>
    <style>
        /* CSS stílus példák */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Helló, világ!</h1> <!-- Elem, amely hozzáadódik a DOM-hoz és a Render Tree-hez -->
    <p style="display: none;">Ez a szöveg rejtett.</p> <!-- Elem a DOM-ban, de nem a Render Tree-ben -->
</body>
</html>

/* CSSOM példa a HTML példához tartozó stílusokra */
/* A stílusstruktúra reprezentálása */
h1 {
    color: blue;
}

A böngésző elemzi a HTML-t és a CSS-t, belső modelleket épít, kiszámítja az elemek elhelyezkedését és megjeleníti azokat a képernyőn.