La Etiqueta FIGCAPTION

La etiqueta <figcaption> se utiliza para agregar leyendas o descripciones a elementos multimedia o bloques de contenido dentro de un <figure>. Es esencial para proporcionar contexto semántico a imágenes, gráficos, diagramas, citas o código, mejorando tanto la accesibilidad como la organización del contenido.

Sintaxis básica

<figure>
  <!-- Contenido multimedia (imagen, código, video, etc.) -->
  <img src="imagen.jpg" alt="Descripción breve">
  <figcaption>Leyenda descriptiva del contenido</figcaption>
</figure>

• <figure>: Contenedor principal para el contenido y su leyenda.

• <figcaption>: Debe estar dentro de <figure> y puede colocarse antes o después del contenido.

• Solo una <figcaption> por <figure>.

Casos de uso comunes

Imágenes con descripción

<figure>
  <img src="paisaje.jpg" alt="Montañas al atardecer">
  <figcaption>Foto de las montañas Rocosas al atardecer (Crédito: John Doe)</figcaption>
</figure>

Código o diagramas

<figure>
  <pre><code>function hola() { console.log("Hola Mundo"); }</code></pre>
  <figcaption>Ejemplo de función en JavaScript</figcaption>
</figure>

Citas destacadas

<figure>
  <blockquote>
    <p>La simplicidad es la clave de la verdadera elegancia.</p>
  </blockquote>
  <figcaption>— Coco Chanel</figcaption>
</figure>

Accesibilidad

• Lectores de pantalla: Anuncian la leyenda como descripción del contenido.

• Buenas prácticas:

  • Usar texto descriptivo y relevante.

  • No repetir el contenido del atributo alt de las imágenes.

  • Mantener la leyenda concisa (1-2 líneas).

Estilización con CSS

Personaliza la apariencia de la leyenda:

figcaption {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Estilo para citas */
figure blockquote + figcaption {
  font-weight: bold;
  color: #2c3e50;
}

Posicionamiento avanzado:

figure {
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem;
}

Errores comunes

Usar sin <figure>

<!-- Incorrecto -->
<img src="foto.jpg">
<figcaption>Leyenda suelta</figcaption>

Múltiples <figcaption>

<!-- Incorrecto -->
<figure>
  <img src="foto.jpg">
  <figcaption>Leyenda 1</figcaption>
  <figcaption>Leyenda 2</figcaption>
</figure>

Leyendas muy largas

<figcaption>
  Esta es una leyenda extremadamente larga que describe cada detalle de la imagen...
</figcaption>

Ejemplos avanzados

Galería de imágenes con leyendas

<div class="galeria">
  <figure>
    <img src="foto1.jpg" alt="Naturaleza">
    <figcaption>Bosque en otoño</figcaption>
  </figure>
  <figure>
    <img src="foto2.jpg" alt="Arquitectura">
    <figcaption>Edificio moderno</figcaption>
  </figure>
</div>

<style>
  .galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
</style>

Contenido mixto (imagen + video)

<figure>
  <img src="diagrama.jpg" alt="Diagrama de flujo">
  <video controls src="tutorial.mp4"></video>
  <figcaption>Diagrama y explicación del proceso</figcaption>
</figure>

Buenas prácticas

1. Relacionar directamente la leyenda con el contenido: Asegurar que el texto describa claramente el elemento dentro de <figure>.

2. Usar elementos semánticos adicionales: Combinar con <blockquote>, <code>, <img>, etc.

3. Optimizar para SEO: Incluir palabras clave relevantes en la leyenda.

Comparación con elementos similares

Elemento	Uso	Ejemplo
<figcaption>	Leyenda para contenido en <figure>	Imágenes, citas, código
<caption>	Leyenda para tablas (<table>)	Descripción de datos tabulares
<alt>	Texto alternativo para imágenes	Accesibilidad básica

Conclusión:

La etiqueta <figcaption> es esencial para:

• Proporcionar contexto semántico a elementos multimedia.
• Mejorar la accesibilidad y la experiencia del usuario.
• Organizar contenido complejo de manera estructurada.

¡Úsala para hacer que tus imágenes, citas y gráficos sean más informativos y profesionales!