acerca de HTML

Referencia de etiquetas

Etiqueta figcaption en HTML: títulos y pies de figuras

La etiqueta <figcaption> proporciona el título o pie de una figura agrupada con <figure>. Sirve para explicar el conjunto: qué representa un diagrama, por qué importa un gráfico o de dónde procede una fotografía. Úsala cuando ese contenido necesite una explicación asociada, en lugar de dejar una frase suelta cuya relación con la figura no esté marcada en HTML.

Ejemplo mínimo: un diagrama con pie

Descarga el diagrama de procesamiento y guárdalo como flujo.svg junto a tu archivo HTML. Es una ilustración propia incluida para practicar. Inserta este fragmento dentro del cuerpo de un documento con codificación UTF-8:

<figure>
  <img src="flujo.svg"
       alt="Flujo: entrada, proceso y salida"
       width="600" height="240">
  <figcaption>Etapas de procesamiento del formulario.</figcaption>
</figure>

Verás tres etapas conectadas por flechas y, debajo, el texto «Etapas de procesamiento del formulario». El alt comunica el recorrido de la imagen; el pie explica a qué proceso corresponde. <figcaption> asocia ese texto al conjunto de la figura, sin añadir numeración, bordes ni un diseño especial.

Si cambias el pie, cambia la explicación, pero no el dibujo ni su alternativa textual. Si retiras <figcaption> con su contenido, desaparece el pie; <figure> sigue siendo válido. Sustituirlo por un párrafo con <p> conserva una frase visible, pero pierde la asociación específica de pie de figura.

Sintaxis y lugar dentro de figure

Escribe <figcaption>Texto del pie</figcaption>, con apertura y cierre. Ambas etiquetas son obligatorias. Su padre directo debe ser <figure> y puede ocupar dos posiciones: primer o último elemento hijo. Cada <figure> admite como máximo un <figcaption>; el pie es opcional.

Puede contener contenido de flujo, como texto, enlaces, énfasis o párrafos, respetando las reglas de los elementos que incluyas. Por ejemplo, un pie extenso puede separar explicación y crédito en dos párrafos. Esas reglas proceden del modelo de contenido de <figcaption> y de su padre <figure>.

No lo anides dentro de un <div> intermedio ni lo coloques entre dos imágenes hermanas. Si una figura reúne varias imágenes, el único pie describe el conjunto; las alternativas alt corresponden a cada imagen.

Qué escribir: descripción, contexto y crédito

Un pie puede responder a preguntas distintas:

  • Descripción: «Participación en tres talleres» identifica lo que muestra la figura.
  • Contexto: «HTML reúne la mayor cantidad de asistentes» explica el dato que quieres destacar.
  • Crédito: «Ilustración propia con datos ficticios» aclara la procedencia de este ejemplo.

No atribuyas una fotografía o unos datos a alguien sin comprobar la fuente. Cuando uses material ajeno, puedes añadir un enlace con <a> dentro del pie para identificar su origen; ese crédito no sustituye los permisos de uso. La guía de enlaces con <a> explica cómo escribir un destino y un texto comprensibles.

Ejemplo práctico: el mismo gráfico con pie arriba y abajo

Descarga el gráfico de participación como participacion.svg. Guárdalo junto al siguiente documento, llamado figuras.html, y ábrelo en el navegador. Los datos son ficticios: 12 asistentes a HTML, 8 a CSS y 4 a JavaScript. El SVG es una ilustración propia; no representa una encuesta ni necesita servicios externos.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pies de un gráfico de talleres</title>
    <style>
      body {
        max-width: 42rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.5;
      }

      .talleres { margin: 2rem 0; }
      .talleres img { display: block; max-width: 100%; height: auto; }
      .talleres figcaption { padding-block: 0.75rem; }
    </style>
  </head>
  <body>
    <h1>Participación en los talleres</h1>

    <h2>Pie antes del gráfico</h2>
    <figure class="talleres">
      <figcaption>
        HTML reúne la mayor cantidad de asistentes.
        Ilustración propia con datos ficticios.
      </figcaption>
      <img src="participacion.svg"
           alt="Asistentes por taller: HTML, 12; CSS, 8; JavaScript, 4."
           width="600" height="240">
    </figure>

    <h2>Pie después del gráfico</h2>
    <figure class="talleres">
      <img src="participacion.svg"
           alt="Asistentes por taller: HTML, 12; CSS, 8; JavaScript, 4."
           width="600" height="240">
      <figcaption>
        HTML reúne la mayor cantidad de asistentes.
        Ilustración propia con datos ficticios.
      </figcaption>
    </figure>
  </body>
</html>
  1. Comprueba que cada figura tiene un único pie, directo dentro de <figure>.
  2. En la primera variante leerás el pie antes del gráfico; en la segunda, después. En ambas describe el mismo conjunto.
  3. Reduce la ventana: el gráfico debe ajustarse al ancho disponible gracias a max-width: 100% y conservar sus proporciones con height: auto.
  4. Desactiva JavaScript: nada cambia, porque este documento solo utiliza HTML, CSS y un archivo SVG.

La longitud de las barras y los números coinciden: 12 es el triple de 4. El pie destaca esa lectura sin repetir toda la imagen. Puedes moverlo de un extremo al otro conservando la estructura válida; colocarlo entre otros hijos de la figura sería un error. Si no aparece el gráfico, comprueba el nombre del archivo y su carpeta: <figcaption> no carga imágenes ni corrige src.

Figcaption, caption y alt: funciones diferentes

<figcaption> explica una figura. <caption> identifica una tabla y se coloca dentro de <table>; no es otra forma de escribir un pie de imagen. Consulta la guía de <caption> cuando necesites nombrar un conjunto de filas y columnas.

alt es un atributo de <img> que aporta su alternativa textual. En el gráfico del ejemplo, comunica todos los valores; el pie presenta una conclusión y su procedencia. Añadir <figcaption> no permite omitir alt ni convertirlo automáticamente en vacío. Un pie como «Figura 2» tampoco explica el contenido de una imagen informativa. La guía de imágenes informativas de W3C WAI orienta cómo expresar el significado de la imagen según su función.

El pie aporta contexto al conjunto, pero no presupongas que se convierte automáticamente en su nombre accesible. El borrador HTML AAM del 29 de julio de 2026, sección 4.1.9, excluye el pie de ese cálculo salvo referencia explícita del autor. Es un documento en desarrollo; el anuncio real varía entre navegadores y lectores de pantalla. Mantén el texto visible y una alternativa adecuada para cada imagen.

Atributos, presentación y errores frecuentes

<figcaption> no tiene atributos específicos. Admite los globales: class para seleccionar estilos, id para identificar el elemento o lang si el idioma del pie difiere del documento. Los atributos href de un enlace pertenecen a <a>; src, width, height y alt del ejemplo pertenecen a <img>.

text-align, padding o font-size son propiedades CSS, no atributos de <figcaption>. El elemento utiliza la interfaz DOM HTMLElement, sin una API especial para pies. No necesita JavaScript ni roles ARIA añadidos para esta función.

Evita estos errores:

  • Usar <figcaption> fuera de <figure> solo para dar un aspecto a una frase. Un párrafo y CSS resuelven una nota corriente.
  • Añadir dos pies al mismo conjunto. Reúne título, explicación y crédito en un único <figcaption>.
  • Colocarlo en mitad de los hijos de <figure>. Muévelo al principio o al final.
  • Repetir el crédito en alt en lugar de describir la información que aporta la imagen.

¿Puede ir arriba de la imagen? Sí: coloca <figcaption> como primer elemento hijo de <figure>, como muestra la primera variante. Su posición visual habitual sigue ese orden, salvo que tu CSS la modifique.

¿Puedo usar figcaption en una tabla? Para nombrar la tabla, usa <caption> dentro de <table>. Una figura puede agrupar una tabla como parte de un conjunto más amplio; su pie describiría ese conjunto y no sustituiría el título propio de la tabla.

Compatibilidad y fuentes

Revisión: 4 de octubre de 2026. <figcaption> está disponible en los navegadores actuales; MDN lo clasifica como ampliamente disponible. Los ejemplos no requieren una API experimental, un servidor ni JavaScript. Su presentación depende del CSS, y la lectura mediante tecnología de asistencia depende de la combinación utilizada.