Flujo

El flujo de una página web determina el orden en que se muestran los elementos vertical y horizontalmente. Por defecto, los elementos se muestran en el orden en que aparecen en el documento HTML, de arriba abajo. El flujo horizontal suele moverse de izquierda a derecha; sin embargo, el flujo también se invierte de derecha a izquierda en los idiomas que se leen de derecha a izquierda.

Cada elemento en HTML es un área rectangular que ocupa una posición en una línea, similar a las palabras en una hoja rayada. Hay dos tipos principales de elementos: block-level y inline.

Tras inspeccionar el ejemplo, podemos decir:

El elemento block-level ocupa toda la línea. No importa la longitud del contenido. Los elementos de bloque se suceden de arriba abajo.

El elemento inline ocupa el espacio teniendo en cuenta el tamaño del contenido. Por eso algunos elementos en línea pueden estar en la misma línea. Cuando no hay espacio suficiente en una línea para que quepan todos los elementos, entonces se traslada a una nueva línea.

Nota

La propiedad de visualización de los elementos HTML está predefinida según los estándares y convenciones establecidos por la especificación HTML. Estos estándares dictan el comportamiento de representación por defecto de los elementos en los distintos navegadores web. Puede encontrar el tipo específico de cualquier elemento en los enlaces de referencia o especificación proporcionados: Referencia HTML y Especificación HTML.

Tipos de elementos

Como se ha mencionado anteriormente, cada elemento de la hoja de estilo del navegador tiene un tipo representado por la propiedad display, que determina su comportamiento. Los dos tipos principales de elementos son block-level y inline, y también hay tipos adicionales, como los elementos inline-block.

Los elementos inline se utilizan principalmente para dar estilo y resaltar contenido de texto, como enlaces, botones e imágenes. Se colocan en una sola línea hasta que no queda más espacio. Cuando la línea está completa, saltan a la línea siguiente y continúan llenándola.

Los elementos block-level están pensados para definir contenedores de texto como títulos, listas y párrafos, así como secciones semánticas más grandes como encabezados, pies de página y secciones. Se representan visualmente como áreas rectangulares apiladas verticalmente unas sobre otras.