Elementos de bloque e inline

Los elementos HTML se comportan principalmente en dos categorías: de bloque e inline. Este comportamiento determina cómo se muestran en la página y cómo interactúan con otros elementos.

Elementos de bloque

Los elementos de bloque siempre comienzan en una nueva línea y ocupan todo el ancho disponible. Ejemplos: <div>, <p>, <h1>–<h6>, <ul>, <ol>.

<div>This is a block element</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>

Elementos inline

Los elementos inline no rompen la línea; permanecen dentro de la línea actual y ocupan solo el espacio necesario. Ejemplos: <span>, <a>, <strong>, <em>.

<span>This is inline</span>
<a href="#">This is a link</a>
<strong>This is bold</strong>

Diferencias clave

Los elementos de bloque se apilan verticalmente, mientras que los elementos inline aparecen uno al lado del otro. Comprender esta diferencia es crucial para construir estructuras HTML correctas.

<div>
  <p>This is a paragraph inside a block element.</p>
  <a href="#">Link</a> and <span>text</span> are inline.
</div>

Inline dentro de bloque — y viceversa

Los elementos inline suelen estar anidados dentro de elementos de bloque — por ejemplo, <strong> o <a> dentro de un <p>. Lo inverso no se recomienda: nunca coloques un elemento de bloque como <div> dentro de un elemento inline como <span>, ya que no es HTML válido.

<p>This is a <strong>bold</strong> word inside a paragraph.</p>

Cómo afecta a la apariencia

Los elementos de bloque aparecen en líneas separadas y se extienden a lo ancho completo, mientras que los elementos inline permanecen en la misma línea y ocupan solo el espacio necesario. Esta diferencia se vuelve visible al aplicar un color de fondo.

<div style="background: lightblue;">Block</div>
<span style="background: lightgreen;">Inline</span>

display: block y display: inline

Con CSS, puedes cambiar el tipo de visualización de cualquier elemento: un elemento inline puede convertirse en 'display: block' y viceversa. Esto te permite ajustar la apariencia sin modificar la estructura HTML.

Cuándo usar cada tipo

Usa elementos de bloque para crear secciones de contenido completas. Usa elementos inline cuando quieras resaltar parte de una oración o unas pocas palabras.