Elementos de bloque e inline en HTML

Cada elemento HTML visible es representado por el navegador como una caja de tipo bloque o inline. Las cajas de bloque se apilan verticalmente y ocupan todo el ancho disponible; las cajas inline fluyen horizontalmente dentro de una línea de texto, como las palabras de una oración. Comprender esta distinción es fundamental para controlar el diseño de una página.

Es importante saber que "bloque" e "inline" no son categorías fijas de HTML — describen cómo se renderiza un elemento por defecto. HTML5 moderno agrupa los elementos por categorías de contenido (contenido de flujo, contenido de fraseo, etc.), mientras que bloque frente a inline es en realidad un concepto de CSS controlado por la propiedad display. Esto significa que el comportamiento predeterminado de cualquier elemento puede modificarse: un <span> puede comportarse como un bloque, y un <div> como inline.

Ver también: Propiedad display de CSS · Etiqueta <div> · Etiqueta <span>

Esta página explica qué son los elementos de bloque e inline, la lista completa de cada tipo, cómo display permite cambiar el comportamiento predeterminado, la importante regla de anidamiento y cuándo usar <div> frente a <span>.

Elementos de bloque

Un elemento de bloque es un elemento HTML que comienza en una nueva línea y ocupa todo el ancho horizontal disponible de su elemento padre. Este tipo de elemento crea bloques de contenido (párrafos, divisiones de página). La mayoría de los elementos HTML son elementos de bloque.

Los elementos de bloque se usan dentro del cuerpo de un documento HTML y pueden contener elementos inline u otros elementos de bloque.

Ejemplo de un elemento de bloque:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>This is a block-level element. It starts on a new line and takes up the full width.</div>
    <p>This is another block-level element. It also starts on a new line.</p>
  </body>
</html>

Pruébalo tú mismo »

Elementos de bloque:
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Elementos inline

A diferencia de los elementos de bloque, los elementos inline no comienzan en una nueva línea. Se insertan dentro de una línea y solo ocupan el ancho que sea necesario. Los elementos inline se incluyen como parte del texto principal.

Los elementos inline suelen contener otros elementos inline, o pueden estar vacíos.

Ejemplo de un elemento inline:

Aquí un <img> aparece junto a un párrafo, y un elemento <a> inline fluye dentro del texto sin romper la línea:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Pruébalo tú mismo »

Para ver con claridad el flujo inline, coloca un <span> en el medio de una oración. Como <span> es inline, el texto continúa en la misma línea y solo se ve afectado el contenido del span:

<p>The total price is
  <span style="color: red; font-weight: bold;">$49.99</span>
  including tax.</p>

El $49.99 con estilo permanece en la línea del texto en curso — nada salta a una nueva línea.

Elementos inline:
`<a>`
`<br>`
`<data>`
`<i>`
`<kbd>`
`<output>`
`<script>`
`<strong>`
`<time>`

Cambiar la visualización con CSS

Como el comportamiento de bloque e inline son propiedades de renderizado, puedes alternarlos con la propiedad CSS display. Esta es una de las razones más comunes para usar display.

En el ejemplo siguiente, se fuerza a un <span> a renderizarse como bloque (de modo que comienza en una nueva línea y ocupa todo el ancho), y a un <div> a renderizarse como inline (para que fluya dentro del texto):

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.as-block {
        display: block;
        background: #e0f7fa;
      }
      div.as-inline {
        display: inline;
        background: #ffecb3;
      }
    </style>
  </head>
  <body>
    <span class="as-block">I am a span behaving like a block.</span>
    <p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
  </body>
</html>

display: inline-block

Existe un tercer valor muy útil: display: inline-block. Fluye junto a otro contenido como un elemento inline, pero también respeta width, height y margin/padding superior e inferior como un elemento de bloque — lo mejor de ambos mundos.

Un caso de uso clásico es una barra de navegación horizontal o una fila de botones que necesitan un ancho y relleno definidos, mientras siguen alineados uno al lado del otro:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        display: inline-block;
        width: 120px;
        padding: 10px 0;
        margin: 4px;
        text-align: center;
        background: #2196f3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </body>
</html>

Cada enlace mantiene su width y padding (comportamiento de bloque) y al mismo tiempo se alinea horizontalmente (comportamiento inline).

Regla de anidamiento: no se permite bloque dentro de inline

Una regla clave de HTML: un elemento de bloque no debe colocarse dentro de un elemento inline. Por ejemplo, un <span> (inline) no debe envolver un <div> (bloque). Hacerlo produce HTML inválido, y los navegadores pueden "corregirlo" dividiendo el marcado de formas inesperadas.

Inválido — un <div> de bloque dentro de un <span> inline:

<!-- Invalid: do not put a block element inside an inline element -->
<span>
  <div>This block must not be here.</div>
</span>

Válido — mantener el <span> inline dentro del <div> de bloque:

<!-- Valid: an inline element nested inside a block element -->
<div>
  <span>This inline element belongs here.</span>
</div>

La dirección inversa (inline dentro de bloque) siempre es correcta. Cuando necesites un contenedor de bloque, usa un elemento de bloque como <div>, no <span>. Nota: los enlaces son un caso especial — desde HTML5, un elemento <a> puede envolver contenido de bloque.

div vs span: contenedores genéricos

Cuando ningún elemento existente se ajusta a la situación, HTML ofrece dos elementos "envolventes" genéricos y sin significado semántico a los que se recurre constantemente:

<div> — un contenedor genérico de bloque. Úsalo para agrupar secciones grandes de contenido para diseño o estilos (una tarjeta, una barra lateral, una fila).
<span> — un contenedor genérico inline. Úsalo para marcar un fragmento de texto dentro de una línea, como colorear una sola palabra o añadir un tooltip.

Una regla sencilla: si estás agrupando bloques completos de la página, elige <div>; si estás marcando un fragmento dentro del texto en curso, elige <span>.

<!-- div: groups a block section -->
<div class="card">
  <h2>Welcome</h2>
  <p>Hello, <span class="username">Aleq</span>!</p>
</div>

Prefiere un elemento semántico (<section>, <article>, <nav>, <strong>, <em>, …) cuando describe adecuadamente tu contenido; recurre a <div>/<span> solo cuando no exista nada más significativo.

Práctica

¿Cuál de las siguientes afirmaciones sobre los elementos de bloque e inline en HTML es correcta?

Si un elemento se renderiza como bloque o como inline está controlado por la propiedad CSS display y puede modificarse.Un elemento de bloque como div puede colocarse dentro de un span inline sin producir HTML inválido.El elemento span es un contenedor genérico de bloque usado para agrupar grandes secciones de una página.Establecer display en inline-block elimina la capacidad de un elemento de respetar width y height.