Agrupación de elementos en HTML

Agrupación de elementos en HTML

Agrupación de elementos en HTML

Para estructurar correctamente una página web requerimos establecer un orden, agrupando las etiquetas y el contenido que formarán la página en segmentos o bloques.

La página web más simple necesita por lo menos de tres segmentos:

  • Encabezado
  • Contenido
  • Pie

Agrupación de elementos en HTML

La agrupación de elementos en HTML tiene dos formas básicas: la agrupación en bloque y la agrupación en línea.

Agrupación en bloque

Estructuralmente en una página web, un bloque es un espacio definido. Puede utilizarse para formar un encabezado, el contenido, el pie de página o un artículo.

bloques
Bloques

División (Div)
<div></div>

Elemento en bloque Elemento en bloque

Es la etiqueta con la que envolvemos las instrucciones y el contenido para formar un bloque de espacio definido.

Por omisión, el navegador lo muestra en su propio espacio, dejando un margen superior e inferior.

See the Pen div by Miguel Méndez (@codigo-web) on CodePen.0

Agrupación en línea

Agrupar elementos en línea significa hacer que un conjunto de elementos, por lo regular palabras o frases, puedan tener un estilo diferente al resto del conjunto donde se encuentran, cambiando sus atributos con estilos en cascada.

enLinea
En línea

Abarcar (Span)
<span></span>

elementoLinea Elemento en línea

Es la etiqueta con la cual se envuelven las instrucciones y el contenido, para formar un conjunto a mostrarse con características diferentes al resto del conjunto donde se encuentra (ajustados con estilos en cascada).

See the Pen span by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Todas las instrucciones en HTML tienen una forma de desplegar su contenido en una página web, puede ser en bloque o en línea.

Existen dos instrucciones que permiten agrupar otras instrucciones y contenidos, para mostrar el conjunto según su propia forma de visualización.

  • div (bloque)
  • span (en línea)

Mediante el uso de estas dos instrucciones es como agrupamos el contenido de una página en segmentos útiles, para posteriormente darle estilos y características únicas a cada uno de los elementos con estilos en cascada.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz