28 - 🧱 Elementos de Bloque y Elementos de Línea

---

Temas tratados en esta entrada

• Valores de visualización en HTML (bloque)
• Elementos a nivel de bloque
• Características de los elementos de bloque
• Ejemplos de elementos de bloque (<p> y <div>)
• Lista de elementos de nivel de bloque en HTML
• Elementos en línea
• Ejemplos de elementos en línea (<span>)
• Uso del elemento <div> como contenedor en HTML
• Estilización de un <div> con CSS
• El elemento <span> (elemento de la APP)

---

Valores de visualización en HTML (bloque)

En HTML, cada elemento tiene un valor de visualización predeterminado que determina cómo se muestra en la página. Los valores más comunes son "bloque" y "en línea". Un elemento con valor de visualización "bloque" ocupa todo el ancho disponible, forzando un salto de línea antes y después. Este tipo de elementos se usa para agrupar contenido que debe mostrarse como una unidad independiente, como párrafos, encabezados y divs.

---

Ejemplo

Este es un ejemplo de un elemento con valor de visualización "bloque".

---

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea, y los navegadores añaden automáticamente un poco de espacio (un margen) antes y después del elemento. Un elemento a nivel de bloque siempre ocupa el ancho completo disponible, extendiéndose hacia la izquierda y la derecha tan lejos como puede.

Dos elementos de bloque comúnmente usados son: <p> y <div>.

El <p> elemento define un párrafo en un documento HTML, mientras que el <div> elemento define una división o una sección en un documento HTML.

---

Ejemplo

Este es un elemento de bloque: un div.

Este es otro elemento de bloque: un párrafo.

---

Características de los elementos de bloque

Los elementos de bloque tienen varias características clave que los distinguen de los elementos en línea.

• Inician en una nueva línea: Cada elemento de bloque comienza en una nueva línea, lo que significa que el contenido posterior se muestra debajo de él.
• Ocupación del ancho completo: Estos elementos siempre ocupan el ancho completo de su contenedor, extendiéndose a lo largo de toda la línea disponible.
• Espaciado automático: Los navegadores suelen añadir márgenes por defecto antes y después de los elementos de bloque, lo que proporciona un espaciado visual entre diferentes secciones del contenido.
• Se pueden contener otros elementos: Los elementos de bloque pueden contener otros elementos de bloque o en línea, lo que permite estructurar el contenido de forma jerárquica.

---

Ejemplo

Este es un elemento de bloque que puede contener otros elementos:

Este es un párrafo dentro de un div.

---

Ejemplos de elementos de bloque (<p> y <div>)

Los elementos de bloque son fundamentales para estructurar contenido en HTML. Dos de los elementos de bloque más comunes son el <p> y el <div>.

El <p> (párrafo) se utiliza para agrupar texto en párrafos, mientras que el <div> se utiliza para dividir secciones de contenido. Ambos elementos comienzan en una nueva línea y ocupan el ancho completo de su contenedor.

---

Ejemplo

Este es un ejemplo de un párrafo (<p>). Los párrafos se utilizan para agrupar texto en bloques.

Este es un ejemplo de una división (<div>). Se utiliza para agrupar otros elementos o secciones en una página.

---

Lista de elementos de nivel de bloque en HTML

Los elementos de nivel de bloque en HTML son aquellos que, por defecto, ocupan todo el ancho disponible de su contenedor y siempre comienzan en una nueva línea. Estos elementos son esenciales para estructurar el contenido de una página web de manera lógica y ordenada.

A continuación se presenta una lista de los elementos de nivel de bloque más comunes en HTML:

• <div>
• <p>
• <h1> a <h6>
• <ul>
• <ol>
• <li>
• <header>
• <footer>
• <section>
• <article>
• <aside>
• <blockquote>
• <form>
• <table>
• <figure>
• <figcaption>
• <canvas>

---

Ejemplo

Título de nivel 1

Este es un párrafo de ejemplo en un elemento de bloque.

Este es un div que actúa como un contenedor.

• Elemento de lista 1
• Elemento de lista 2

---

Elementos en línea

Los elementos en línea son aquellos que no comienzan en una nueva línea. A diferencia de los elementos de bloque, ocupan solo el ancho necesario para su contenido y se sitúan uno al lado del otro en la misma línea. Esto permite que se puedan combinar de manera fluida con otros elementos de línea y de bloque.

Los elementos en línea son ideales para añadir elementos dentro de párrafos sin romper la estructura de bloque. Por ejemplo, se pueden usar para aplicar estilo a palabras individuales o agrupar partes del texto.

Algunos de los elementos en línea más comunes en HTML son:

• <span>
• <a>
• <strong>
• <em>
• <img>
• <br>
• <code>
• <small>
• <sub>
• <sup>
• <time>
• <q>

---

Ejemplo

Este es un ejemplo de un elemento en línea. Se puede notar que el texto en rojo no inicia en una nueva línea.

También, puedes usar un enlace para redirigir a otra página sin romper la línea.

---

Ejemplos de elementos en línea (<span>)

El elemento <span> es un contenedor en línea utilizado para agrupar partes de texto o elementos HTML dentro de otro elemento. A diferencia de los elementos de bloque, el <span> no interrumpe el flujo del contenido y permite aplicar estilos CSS a secciones específicas del texto sin afectar la estructura general.

Es común utilizar <span> para resaltar texto, aplicar colores o estilos, o simplemente para marcar texto para futuras manipulaciones mediante JavaScript.

---

Ejemplo

Este es un texto con un span verde y en negrita que se muestra dentro de un párrafo.

El subrayado también se puede aplicar usando <span>.

---

Uso del elemento <div> como contenedor en HTML

El elemento <div> es un contenedor de nivel de bloque utilizado para agrupar otros elementos HTML. No tiene un significado semántico en sí mismo, pero es muy útil para estructurar y organizar el contenido de una página. Se puede utilizar para aplicar estilos, crear secciones en un diseño, o para manipular grupos de elementos mediante JavaScript.

La versatilidad del <div> permite a los desarrolladores crear layouts complejos y responsivos utilizando CSS. Por ejemplo, puedes crear columnas, filas o secciones en una página web utilizando <div> para contener otros elementos.

---

Ejemplo

Título de una sección

Este es un párrafo que está contenido dentro de un elemento <div>.

Subtítulo dentro de un contenedor

Este es otro párrafo dentro de un contenedor <div> diferente.

---

Estilización de un <div> con CSS

La estilización de un elemento <div> con CSS permite a los desarrolladores personalizar la apariencia visual del contenido en la web. Puedes cambiar propiedades como el color de fondo, el tamaño del texto, los bordes, los márgenes, el padding y muchos otros estilos para mejorar la presentación del contenido.

Utilizando selectores CSS, puedes aplicar estilos a todos los elementos <div> de una página o a un elemento específico utilizando identificadores o clases. Esto facilita la creación de diseños atractivos y consistentes en toda la web.

---

Ejemplo

Estilo del contenedor

Este <div> tiene un fondo azul claro, un borde azul oscuro y un padding de 15px.

Estilo alternativo del contenedor

Este <div> tiene un fondo de color rosa claro y un borde rojo punteado, con un padding de 20px.

---

El elemento <span> (elemento de la APP)

El elemento <span> es un contenedor en línea que no tiene significado semántico por sí mismo, pero es extremadamente útil para aplicar estilos o manipular partes específicas de un texto dentro de otros elementos. Se utiliza comúnmente para cambiar el formato de una parte del texto, como su color o estilo, sin interrumpir el flujo del contenido.

A menudo, el <span> se utiliza en aplicaciones web para permitir que los desarrolladores modifiquen dinámicamente el contenido visual utilizando JavaScript y CSS. Su flexibilidad lo convierte en una herramienta valiosa para la creación de interfaces de usuario interactivas y atractivas.

---

Ejemplo

En un texto, puedes tener una palabra destacada, como importante, que se resalta usando el elemento <span> para aplicar estilos específicos.

Otro ejemplo sería subrayar una parte del texto sin afectar el resto de la línea.

---

Resumen de la entrada

Valores de visualización en HTML (bloque): En HTML, los elementos tienen valores de visualización predeterminados que determinan cómo se comportan en la página. Los valores más comunes son "bloque" y "en línea". Los elementos de bloque ocupan el ancho completo disponible y comienzan en una nueva línea, mientras que los elementos en línea ocupan solo el espacio necesario.

Elementos a nivel de bloque: Los elementos a nivel de bloque, como <p> y <div>, inician en una nueva línea y se extienden a lo largo de todo el ancho disponible. Esto los hace ideales para estructurar el contenido en secciones y párrafos.

Características de los elementos de bloque: Los elementos de bloque son fácilmente reconocibles por su comportamiento en el flujo del documento. Siempre tienen un margen automáticamente añadido antes y después de ellos, y ocupan el 100% del ancho de su contenedor.

Ejemplos de elementos de bloque (<p> y <div>): Los elementos más comunes de bloque son <p>, que define un párrafo, y <div>, que define una sección o división en el documento. Ambos son fundamentales para estructurar el contenido de una página web.

Lista de elementos de nivel de bloque en HTML: HTML proporciona una variedad de elementos a nivel de bloque, incluyendo <article>, <header>, <footer>, <section>, y más. Cada uno de estos elementos sirve para organizar el contenido de maneras específicas y semánticas.

Elementos en línea: A diferencia de los elementos de bloque, los elementos en línea no comienzan en una nueva línea y solo ocupan el espacio necesario. Ejemplos de elementos en línea incluyen <span>, <a>, y <img>.

Ejemplos de elementos en línea (<span>): El elemento <span> es un contenedor en línea que permite aplicar estilos a una porción del texto sin interrumpir el flujo. Es útil para modificaciones específicas dentro de un párrafo o texto.

Uso del elemento <div> como contenedor en HTML: El elemento <div> actúa como un contenedor de nivel de bloque, ideal para agrupar otros elementos HTML. Aunque no tiene un significado semántico por sí mismo, se utiliza para organizar y estructurar el contenido.

Estilización de un <div> con CSS: La estilización de un <div> con CSS permite personalizar la apariencia del contenido. Puedes cambiar propiedades como el color de fondo, los bordes, y el padding para mejorar la presentación visual.

---

Ir al índice