Como é que o HTML é convertido numa página web…

O processo de conversão de HTML em uma página web inclui várias etapas principais:

Análise de HTML:
- O navegador lê o código HTML e constrói uma árvore de objetos — DOM (Modelo de Objeto do Documento).
- O DOM representa a estrutura do documento na forma de nós (elementos, atributos, texto).
Análise de CSS:
- O navegador lê os estilos CSS (externos, internos, inline).
- É construída a árvore de estilos — CSSOM (Modelo de Objeto CSS).
Construção da árvore de renderização (Render Tree):
- O DOM e o CSSOM são combinados.
- É criado uma árvore de objetos que contém informações visuais (quais elementos são visíveis e como devem parecer). Elementos com display: none não aparecem na Render Tree.
Layout (Reflow):
- São calculadas as coordenadas e tamanhos exatos de cada elemento na Render Tree na tela.
- Os elementos são redistribuídos se seus tamanhos ou posições mudarem (por exemplo, ao alterar o tamanho da janela ou adicionar conteúdo).
Pintura (Painting):
- Os pixels são renderizados visualmente na tela, usando as informações da Render Tree e os resultados do layout.
- A pintura é feita em camadas (fundo, borda, conteúdo).
Composição (Compositing):
- As diferentes camadas de renderização são sobrepostas na ordem correta para formar a imagem final da página.

Estes passos são realizados sequencialmente, embora alguns possam se repetir (por exemplo, layout e pintura ao alterar o DOM ou estilos após o carregamento).

<!-- Exemplo de um documento HTML5 simples -->
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de página</title>
    <style>
        /* Exemplo de estilos CSS */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Olá, mundo!</h1> <!-- Elemento que será adicionado ao DOM e ao Render Tree -->
    <p style="display: none;">Este texto está oculto.</p> <!-- Elemento no DOM, mas não na Render Tree -->
</body>
</html>

/* Exemplo de CSSOM para os estilos do exemplo HTML */
/* Representa a estrutura de estilos */
h1 {
    color: blue;
}

O navegador analisa o HTML e CSS, constrói modelos internos, calcula a disposição dos elementos e os renderiza na tela.

Como é que o HTML é convertido numa página web?