Renderización de HMTL Copy
¿Cómo se renderiza el HTML?
El renderizado de un documento HTML es el proceso que realiza el motor de render de los navegadores Web.
Antes de explicarte cómo funciona este proceso en el navegador, debemos saber:
¿Qué es el DOM? y ¿Qué es el DOCTYPE?
Entonces ¿Qué es el DOM?
Sus siglas se refieren a Document Object Model, que traduce, Modelo de Objetos del Documento.
El DOM es la representación de los elementos HTML en el navegador que tiene características y funcionalidades propias de HTML5 para cada etiqueta. Su estructura es tipo árbol y cada uno de los elementos representa un nodo.
A través del DOM y el conjunto de funciones que provienen de HTML5, podemos manipular una página Web a nuestro gusto.
Siempre que vamos a crear un documento HTML debemos saber que existen un conjunto de etiquetas obligatorias para la creación de una página Web.
DOCTYPE, es la primera etiqueta obligatoria que da inicio a un documento HTML indicando al navegador la versión HTML que vamos a utilizar para la creación de nuestra página Web.
Esta etiqueta se utiliza luego de la aparición de la versión 2.0 como un recurso para que el motor de render identifique el tipo de versión que debe capturar durante el proceso.
DOCTYPE ha evolucionado en la forma como se declara en cada versión. Veamos:
HTML5:
<! DOCTYPE html>
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
HTML3:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML2:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
Recuerda que la versión de HTML que vamos a usar en este curso es HTML5, por lo tanto el único DOCTYPE válido es:
HTML5:
<! DOCTYPE html>
Ahora, retomemos el proceso que realiza el motor del navegador para renderizar el documento HTML.
Para comenzar, este proceso se realiza de forma incremental, es decir el motor comienza a leer el documento en línea iniciando en la parte superior hacia la inferior.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title> Mi primera página Web</title>
</head>
<body>
<h1>¡Hola Mundo!, esto es HTML</h1>
</body>
</html>
La primera etiqueta que encuentra es el DOCTYPE que indica al motor el tipo de versión del documento HTML.
A continuación siguen las etiquetas semánticas que representan los elementos del documento. Este proceso se conoce como Parsear el HTML a Nodos DOM. En el mundo de la informática, parsear se refiere a la conversión de un elemento de un tipo a otro. En el contexto del HTML significa convertir una marca o etiqueta a un nodo tipo DOM.
Cuando el motor de render se encuentra con el símbolo de apertura de una etiqueta, es decir, menor que (<), comprende que el paso siguiente es leer la etiqueta específica, y luego, el símbolo de cierre barra inclinada mayor que (/>). Una vez lee la etiqueta completa procede a Parsear y agregar el nodo al Árbol DOM.
Los símbolos de apertura y cierre son las etiquetas obligatorias que indican al motor del navegador qué elementos son HTML y cuáles no. Aquellos que no son parte del lenguaje HTML son ignorados por el motor.
La prioridad principal del motor es mostrar los resultados de la manera más rápida posible. Así funciona el proceso que realiza el navegador al momento de interpretar nuestro documento HTML, y entregarnos el resultado final: nuestra página Web.