Flujo natural de elementos HTML

En este artículo vamos a explicar cómo funciona el flujo natural de elementos HTML en una página web y su distribución en la pantalla. Cuando el navegador lee un archivo HTML se inicia el proceso de carga de los recursos de la página web. Dentro de estos recursos encontramos hojas de estilos CSS o JavaScript que pueden influir en el diseño y colocación de los elementos.

En este artículo vamos a explicar el posicionamiento y distribución de los elementos HTML sin tener en cuenta hojas CSS ni JavaScript, describiendo únicamente cómo funciona el flujo natural de elementos HTML. Este artículo está fuertemente ligado al Modelo de caja en CSS, donde se explica detalladamente cómo se interpreta cada elemento HTML con su modelo de caja.

La carga de elementos HTML

Al visitar una página web el navegador inicia un proceso de carga, renderizado y visualización, que pasa por una serie de pasos:

• Se lee el archivo HTML línea por línea. Durante este proceso, el navegador construye el DOM (Modelo de Objetos del Documento) interpretando las etiquetas HTML y creando una representación estructurada del contenido de la página.
• Mientras procesa el HTML, el navegador descarga en paralelo las referencias a otros recursos como archivos CSS, JavaScript e imágenes. Estos permite minimizar el tiempo de carga total de la página.
• A medida que se descargan los recursos adicionales, el navegador continúa construyendo el árbol DOM agregando nodos correspondientes a estos recursos. El árbol DOM representa la estructura jerárquica de la página web, donde cada elemento HTML se representa como un nodo en el árbol.
• Una vez que se ha construido el árbol DOM y descargados los recursos asociados, el navegador procede a renderizar la página. Aquí se combina el DOM con las hojas de estilo CSS para determinar el diseño y la apariencia visual de la página.
• Si la página contiene código JavaScript, se ejecutará después de que se haya completado el proceso de renderizado. El JavaScript puede manipular dinámicamente el DOM, agregar interactividad a la página, realizar solicitudes adicionales al servidor y otras acciones según sea necesario.
• Una vez la página se ha renderizado y se ha ejecutado el JavaScript, el usuario puede interactuar con ella.

Como vemos en este resumen, el flujo de elementos HTML puede implicar solicitar, descargar y renderizar recursos adicionales como CSS y ejecutar JavaScript. Estos recursos adicionales afectarían al flujo natural de elementos HTML. Ahora que sabemos cómo funciona la carga de una página web, vamos a explicar cómo se distribuyen sus elementos HTML de forma natural y sin interferencia de CSS ni JavaScript.

El flujo natural de elementos HTML

Como hemos visto, los elementos HTML se leen linea a linea en el archivo HTML, estableciendo un orden y una jerarquía de elementos HTML en el DOM. Este orden es el flujo natural de elementos HTML y determina cómo se presentan y organizan en la página. Los elementos que están anidados en otros elementos se consideran hijos de esos elementos padres y se colocan dentro de ellos en la jerarquía del DOM.

Cada elemento HTML se representa visualmente en la página como una caja rectangular, conocida como modelo de caja. El modelo de caja incluye (por defecto) propiedades como el ancho, el alto, el relleno, el margen y el borde, que se pueden controlar y modificar mediante reglas CSS. Comprender el modelo de caja es crucial para crear diseños web responsivos y adaptativos que se ajusten a diferentes tamaños de pantalla y dispositivos.

Cada elemento HTML representado como una caja puede tener dos tipos de posicionamiento natural que afectarán a su flujo y distribución en la página:

• Posicionamiento en linea: Los elementos en línea, como el texto y las imágenes, se colocan en línea uno tras otro, de izquierda a derecha, hasta que el ancho del contenedor lo permite. Una vez que el ancho del contenedor se llena, los elementos en línea pasan a la línea siguiente.
• Posicionamiento de bloque: Los bloques de división se colocan uno debajo del otro en el orden en que aparecen en el HTML. Cada bloque de división ocupa todo el ancho disponible de su contenedor principal.

En ausencia de estilos CSS o JavaScript que modifiquen el flujo de los elementos, los elementos en una página web se muestran en el orden en que aparecen en el HTML, siguiendo un flujo natural de arriba hacia abajo y de izquierda a derecha.

Ejemplo de flujo natural HTML

Veamos todo lo explicado hasta el momento con un sencillo ejemplo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Flujo Natural de Elementos</title>
</head>
<body>
  <h1>Ejemplo de flujo natural de elementos</h1>
  
  <!-- Párrafos -->
  <p>Este es un párrafo de texto en el flujo natural de elementos.</p>
  <p>Este es otro párrafo de texto que sigue al primer párrafo.</p>
  
  <!-- Imágenes -->
  <img src="imagen.jpg" alt="Ejemplo de Imagen" width="300" height="200">
  <img src="imagen.jpg" alt="Otra Imagen" width="300" height="200">
  
  <!-- Divs -->
  <div>
    <p>Este es un div que contiene un párrafo de texto.</p>
    <p>Y este es otro párrafo dentro del mismo div.</p>
  </div>
  <div>
    <img src="imagen.jpg" alt="Imagen en Div" width="300" height="200">
    <p>Este es un div que contiene una imagen y un párrafo de texto.</p>
  </div>
</body>
</html>

En este ejemplo, los elementos HTML están colocados en el orden en que aparecen en el HTML y se muestran según sus estilos por defecto. Los títulos <h1>, párrafos <p> y bloques <div> se muestran como bloques y las imágenes <img> se muestran en linea. Todos ellos siguiendo el flujo natural de arriba hacia abajo y de izquierda a derecha. No se aplican estilos CSS ni se utiliza JavaScript para modificar el diseño o el orden de los elementos.

Cambiar el flujo natural con CSS

Hasta aquí hemos visto cómo funciona la distribución de los elementos HTML durante el flujo natural de la carga de una web. Ahora con una simple instrucción CSS vamos a cambiar su posicionamiento natural para distribuir todos los elementos en linea o en bloque y observar cómo afecta a su posicionamiento, respecto al flujo natural de elementos HTML.

Flujo natural de elementos inline

Añadiendo estos estilos CSS a nuestro ejemplo HTML obtendremos la siguiente distribución en linea:

  p, img, div { display: inline; }

Como se puede ver, excepto <h1> todos los elementos se colocan uno al lado del otro de izquierda a derecha hasta el final del espacio disponible. Entonces salta a la siguiente linea y continua, siguiendo el flujo natural de arriba hacia abajo y de izquierda a derecha.

Flujo natural de elementos block

Añadiendo estos estilos CSS a nuestro ejemplo HTML obtendremos la siguiente distribución en bloques:

  p, img, div { display: block; }

En este caso el posicionamiento es por bloques y coloca a cada elemento uno debajo del otro en orden secuancial, tal y como aparecen en el HTML.

El flujo de elementos HTML en una página web involucra la construcción del DOM y la presentación visual de elementos HTML como cajas mediante el modelo de caja. Utilizando reglas CSS se puede alterar la representación de elementos HTML y mediante JavaScript podríamos acceder a la manipulación dinámica por parte del usuario. Comprender cómo estos elementos interactúan es fundamental para el desarrollo web efectivo y la creación de experiencias de usuario atractivas y funcionales.

¡ Espero que este artículo sea de vuestro interés !