Etiqueta HTML <figcaption>

La etiqueta <figcaption> es uno de los elementos HTML5. Define una leyenda o descripción para el contenido de un elemento <figure>. Debe ser el primer o último hijo de <figure>. Como primer hijo, muestra la leyenda encima del contenido de la figura; como último hijo, la muestra debajo.

Un <figure> puede contener solo un <figcaption>, pero la propia figura puede englobar muchos tipos de contenido autocontenido: una <img>, un listado <code>, una <table>, un <blockquote>, un gráfico y más.

¿Por qué usar `<figcaption>` en lugar de un `<p>`?

Podría colocar un <p> junto a una imagen y visualmente se vería igual. La diferencia es semántica y resulta más relevante para la accesibilidad.

Cuando una leyenda se marca como <figcaption> dentro de un <figure>, el navegador asocia programáticamente la leyenda con la figura. Las tecnologías de asistencia, como los lectores de pantalla, anuncian ambas juntas — el lector escucha que el contenido es una figura y escucha su leyenda como la etiqueta que la describe. Un <p> sin más es simplemente texto sin relación que aparece cerca; nada le indica a la máquina que pertenece a la imagen.

Por eso, use <figure> + <figcaption> siempre que la leyenda sea parte del contenido (y espere que ambos se muevan juntos si la página se redistribuyera). Use un <p> simple para el texto de párrafo ordinario.

Sintaxis

La etiqueta <figcaption> viene en pares. El contenido se escribe entre las etiquetas de apertura <figcaption> y de cierre (</figcaption>), y el elemento reside dentro de un <figure>:

<figure>
  <!-- figure content, e.g. an image, code block, or table -->
  <figcaption>Caption text</figcaption>
</figure>

Ejemplo de la etiqueta HTML `<figcaption>`:

Etiqueta HTML <figcaption>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Leyenda primero vs. leyenda al final

Mueva el <figcaption> para controlar dónde aparece la leyenda. Nada más cambia — solo su posición entre los hijos de la figura.

Leyenda debajo de la imagen (último hijo):

<figure>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
</figure>

Leyenda encima de la imagen (primer hijo):

<figure>
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
</figure>

Usar `<figcaption>` más allá de las imágenes

Un <figure> es para cualquier unidad autocontenida que se quiera titular — no se limita a imágenes.

Titular un listado de código

Envuelva un bloque <pre> / <code> para vincular el listado con su etiqueta:

<figure>
  <figcaption>Listing 1 – A minimal "Hello, world" in JavaScript.</figcaption>
  <pre><code>console.log("Hello, world!");</code></pre>
</figure>

Titular una tabla

<figure>
  <figcaption>Table 1 – HTTP status codes used by the API.</figcaption>
  <table>
    <tr><th>Code</th><th>Meaning</th></tr>
    <tr><td>200</td><td>OK</td></tr>
    <tr><td>404</td><td>Not Found</td></tr>
  </table>
</figure>

Nota: una <table> tiene su propio elemento de leyenda integrado, <caption>, que es la opción más convencional para una tabla de datos individual. Use <figure>/<figcaption> cuando la tabla sea una de varias figuras con leyenda en un documento, o cuando desee una etiqueta estilo "Tabla 1" que se lea como una figura.

Titular una cita

<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

Consulte la etiqueta <blockquote> para más información sobre cómo citar fuentes externas.

Accesibilidad: `alt` no es un `figcaption`

Es fácil confundir el atributo alt de una imagen con un <figcaption>, pero tienen propósitos distintos y no deben duplicarse entre sí:

alt es la alternativa textual de la imagen. Reemplaza la imagen cuando no se puede ver (enlace roto, conexión lenta o usuario sin capacidad visual). Describe lo que muestra la imagen. Un lector de pantalla lo lee en lugar de la imagen.
<figcaption> es una leyenda — información complementaria sobre la figura que también ve un lector con visión. A menudo añade contexto que la imagen por sí sola no transmite ("Fig.1 – Las ventas crecieron un 20% año tras año").

Ambos pueden aplicarse a la misma figura al mismo tiempo:

<figure>
  <img src="chart.png" alt="Bar chart of quarterly sales rising each quarter" />
  <figcaption>Fig.2 – Quarterly sales, 2025.</figcaption>
</figure>

Aquí alt describe el elemento visual ("un gráfico de barras que sube cada trimestre") para que los usuarios sin visión obtengan los datos, mientras que el <figcaption> añade la etiqueta que todos leen. Mantenga alt no vacío y descriptivo incluso cuando haya una leyenda.

Atributos

La etiqueta <figcaption> admite los Atributos Globales y los Atributos de Eventos.

Cómo dar estilo a una etiqueta HTML <figcaption>

Por defecto, los navegadores renderizan el elemento <figcaption> como un elemento de bloque. Puede personalizar su apariencia con CSS:

figcaption {
  font-style: italic;
  color: gray; /* muted text so the caption reads as secondary */
  text-align: center;
  margin-top: 5px;
}

Un ejemplo completo y ejecutable que da estilo a la leyenda y otorga a la figura un marco sutil:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled figcaption</title>
    <style>
      figure {
        border: 1px solid lightgray;
        padding: 10px;
        display: inline-block;
        text-align: center;
      }
      figcaption {
        font-style: italic;
        color: gray;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A cute baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Práctica

¿Cuál es la función de la etiqueta HTML <figcaption>?

Asociar programáticamente una leyenda con un elemento <figure>Titular únicamente imágenes, y nunca otro contenidoProporcionar un encabezado para una sección o páginaCrear viñetas en una lista

¿Por qué usar <figcaption> en lugar de un <p>?