¿Cómo se convierte HTML en una página web?

El proceso de convertir HTML en una página web incluye varias etapas principales:

Análisis de HTML:
- El navegador lee el código HTML y construye un árbol de objetos — DOM (Modelo de Objeto del Documento).
- El DOM representa la estructura del documento en forma de nodos (elementos, atributos, texto).
Análisis de CSS:
- El navegador lee los estilos CSS (externos, internos, en línea).
- Se construye el árbol de estilos — CSSOM (Modelo de Objeto CSS).
Construcción del árbol de renderizado (Render Tree):
- Se combinan el DOM y el CSSOM.
- Se crea un árbol de objetos que contiene información visual (qué elementos son visibles y cómo deben verse). Los elementos con display: none no aparecen en el Render Tree.
Layout (Reflow):
- Se calculan las coordenadas y tamaños exactos de cada elemento en el Render Tree en la pantalla.
- Se redistribuyen los elementos si cambian sus tamaños o posiciones (por ejemplo, al cambiar el tamaño de la ventana o agregar contenido).
Pintado (Painting):
- Se renderizan visualmente los píxeles en la pantalla, usando la información del Render Tree y los resultados del layout.
- Se realiza el pintado en capas (fondo, borde, contenido).
Composición (Compositing):
- Las diferentes capas de renderizado se superponen en el orden correcto para formar la imagen final de la página.

Estos pasos se realizan de forma secuencial, aunque algunos pueden repetirse (por ejemplo, layout y pintado al cambiar el DOM o estilos después de cargar).

<!-- Ejemplo de un documento HTML5 simple -->
<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de página</title>
    <style>
        /* Ejemplo de estilos CSS */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>¡Hola, mundo!</h1> <!-- Elemento que será añadido al DOM y al Render Tree -->
    <p style="display: none;">Este texto está oculto.</p> <!-- Elemento en el DOM, pero no en el Render Tree -->
</body>
</html>

/* Ejemplo de CSSOM para los estilos del ejemplo HTML */
/* Representa la estructura de estilos */
h1 {
    color: blue;
}

El navegador analiza el HTML y CSS, construye modelos internos, calcula la disposición de los elementos y los renderiza en la pantalla.