Elementos Inline y Block en HTML

En HTML, existen los elementos Inline (en línea) y los elementos Block (de bloque), estos son fundamentales para comprender cómo se estructura y se presenta el contenido en una página web. Estos dos tipos de elementos se comportan de manera diferente y afectan la disposición y el flujo de los elementos en el documento HTML. A continuación, exploraremos qué son, cómo funcionan, sus diferencias y cómo puedes utilizarlos para crear diseños efectivos y bien organizados.

Elementos en linea INLINE HTML

Los elementos de tipo Inline solo ocupan el espacio necesario para mostrar su contenido, es decir, no se extienden automáticamente al ancho completo del contenedor. Estos elementos no comienzan en una nueva línea; en cambio, se alinean junto a otros elementos inline que los rodean, como palabras en una oración. Los elementos Inline generalmente contienen solo otros elementos Inline o contenido de texto.

Como su nombre mismo indica, los elementos inline son aquellos cuyo contenido se encuentra en una misma línea, de tal manera que si colocamos dos o más elementos en línea sin expresar un salto de línea, estos elementos se presentarán uno seguido de otro en una misma línea.

Lista de elementos tipo inline en HTML

Aquí tienes una lista de los principales elementos inline en HTML:

1. <a>: Define un hipervínculo.
2. <b>: Resalta texto en negrita.
3. <em>: Añade énfasis en el texto (por lo general en cursiva).
4. <i>: Coloca texto en cursiva sin indicar énfasis.
5. <img>: Inserta una imagen.
6. <input>: Define un campo de entrada en formularios.
7. <label>: Etiqueta asociada a un elemento de formulario.
8. <mark>: Resalta texto.
9. <small>: Muestra texto en tamaño más pequeño.
10. <span>: Contenedor genérico en línea para aplicar estilos o clases.
11. <strong>: Da énfasis fuerte al texto (normalmente en negrita).
12. <u>: Subraya texto.
13. <sup>: Texto en superíndice.
14. <sub>: Texto en subíndice.
15. <br>: Inserta un salto de línea.
16. <code>: Fragmento de código.
17. <cite>: Define una referencia o fuente.

Además de los mencionados existen más, por otro lado Elementos inline específicos de HTML5, como <time> para expresar fechas y horas, <bdi> y <bdo> para control de direcciones de texto, <data> para asociar datos legibles por máquinas y <wbr> para indicar puntos de quiebre opcionales en líneas, ofrecen funcionalidades adicionales para casos más específicos y avanzados. Estos elementos los exploraremos más adelante, al desarrollar HTML5.

Ejemplos de elementos en línea HTML

A continuación, presentamos un ejemplo claro donde se puede observar cómo los elementos Inline se muestran uno tras otro en la misma línea, sin saltos de línea; los elementos que utilizaremos como ejemplos serán:

<a href="https://desarrolladoresweb.org">ENLACE DE TEXTO</a>
<img src="gatito.jpg" width="150px" height="100px"/>
<input/>
<code> Pedazo de código</code>

Resultado:

Como se puede observar, los elementos están en la misma línea; esto sucede porque son elementos Inline. Espero que esto haya quedado claro.

Elementos en bloque BLOCK en HTML

Los elementos de tipo Block (o bloque) ocupan el 100% del ancho de su contenedor, lo cual significa que abarcan desde el borde izquierdo hasta el borde derecho del contenedor en el que se encuentran. Por lo general, estos elementos empiezan en una nueva línea y empujan cualquier contenido previo o posterior hacia arriba o abajo, lo que genera una clara división visual entre ellos. Los elementos Block pueden contener otros elementos Block e Inline.

Los elementos de tipo bloque, o BLOCK, se comportan automáticamente como bloques, generando un salto de línea por defecto cada vez que aparecen, sin requerir una etiqueta adicional para el salto de línea.

Lista de elementos tipo BLOCK en HTML

Aquí tienes una lista de los principales elementos Block en HTML:

• <div>: Elemento contenedor genérico.
• <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Párrafos y encabezados de diferentes niveles.
• <ul>, <ol>, <li>: Elementos de listas no ordenadas, ordenadas y elementos de lista.
• <table>, <tr>, <td>: Elementos para crear tablas, filas y celdas.
• <dl>, <dt>, <dd>: Elementos de lista de definiciones, términos y descripciones.
• <form>: Contenedor para formularios.

Por otro lado, HTML5 introdujo nuevos elementos block que mejoran la semántica y la organización del contenido web. Elementos como <header> y <footer> permiten definir encabezados y pies de una sección o página, <section> y <article> representan secciones temáticas y contenido independiente, <nav> facilita la navegación entre páginas, y <aside> se usa para contenido relacionado o adicional, generalmente ubicado en un lateral. Conoceremos estos elementos HTML5 en profundidad más adelante.

Ejemplos de elementos HTML tipo bloque

Un ejemplo será muy útil para observar el comportamiento de los elementos HTML de tipo bloque. En este ejemplo, crearemos una serie de elementos que incluyen: un título principal (<h1>), seguido de un párrafo, un subtítulo (<h2>) y, finalmente, una lista ordenada de colores:

<h1>Título principal</h1>
<p>Párrafo extenso en el que se explica todo sobre los elementos en línea y en bloque de HTML, además de sus diferencias y cuáles son, es fantástico aprender cosas nuevas todos los días.</p>
<h2>Subtítulo del artículo</h2>
<ol>
  <li>Blanco</li>
  <li>Negro</li>
  <li>Rojo</li>
</ol>

Resultado:

Como se puede notar, los elementos de tipo ‘block’ actúan como bloques independientes que comienzan en una nueva línea sin necesidad de un salto de línea adicional. Cada vez que se introduce un elemento HTML de tipo ‘block’, se genera automáticamente un salto de línea.

Diferencias entre elementos en linea y bloque en html

Es claramente notable que la diferencia principal es que los elementos HTML en línea se mantienen en la misma línea a menos que se especifique un salto de línea, mientras que un elemento de bloque siempre comienza y termina en su propia línea.

Diferencias Principales entre Elementos Inline y Block

Es importante mencionar que los elementos de tipo bloque pueden contener otros elementos del mismo tipo, y por supuesto, también pueden incluir elementos de línea dentro de ellos.

Uso Práctico y Recomendaciones

• Elementos Block son ideales para crear la estructura y organización de una página web. Utilízalos para agrupar secciones o bloques de contenido, como encabezados, párrafos o contenedores (<div>).
• Elementos Inline se usan para dar formato dentro de texto, enlaces y contenido pequeño que debe aparecer en línea, como los botones o enlaces (<a> y <span>).
• Elementos Inline-Block combinan lo mejor de ambos y son útiles para crear elementos interactivos como botones o íconos que necesitan dimensiones específicas y que deben alinearse en línea sin ocupar el 100% de ancho.

Modificar el Comportamiento con CSS

En CSS, se puede cambiar el comportamiento de estos elementos usando las propiedades display: inline, display: block, display: inline-block, y otros valores adicionales como flex o grid. Desarrollaremos y Profundizaremos en estos temas durante el curso de CSS más adelante.