La Etiqueta FIGURE

La etiqueta <figure> se utiliza para marcar contenido autónomo que complementa el flujo principal de un documento, como imágenes, diagramas, fragmentos de código o citas. Junto con <figcaption>, proporciona un contexto semántico y accesible para agregar descripciones o leyendas.

Sintaxis básica

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

• <figure>: Contenedor principal del contenido.

• <figcaption>: Leyenda opcional (puede ir antes o después del contenido).

• Solo una <figcaption> por <figure>.

Casos de uso comunes

Imágenes con contexto

<figure>
  <img src="aurora-boreal.jpg" alt="Aurora boreal en Noruega">
  <figcaption>Fotografía de la aurora boreal en Tromsø, Noruega. Crédito: Jane Doe</figcaption>
</figure>

Fragmentos de código o diagramas

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

Citas textuales destacadas

<figure>
  <blockquote>
    <p>La simplicidad es la sofisticación definitiva.</p>
  </blockquote>
  <figcaption>— Leonardo da Vinci</figcaption>
</figure>

Accesibilidad

• Lectores de pantalla: Reconocen la relación entre <figure> y <figcaption>.

• Buenas prácticas:

  • Usar <figcaption> para describir el contenido relevante.

  • No repetir el texto del alt en la leyenda.

  • Priorizar contenido que requiera explicación adicional.

Estilización con CSS

Personaliza el contenedor y su leyenda:

figure {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin: 2rem 0;
  text-align: center;
}

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

/* Ejemplo avanzado: Leyenda superpuesta en imágenes */
figure {
  position: relative;
  max-width: 600px;
}

figure img {
  width: 100%;
}

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

Errores comunes

Usar para contenido no relacionado

<!-- Incorrecto -->
<figure>
  <p>Texto genérico sin necesidad de leyenda.</p>
</figure>

Múltiples <figcaption>

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

Ignorar contenido autónomo

<!-- Incorrecto: La imagen no necesita figura si no hay leyenda -->
<figure>
  <img src="icono.png" alt="Ícono">
</figure>

Ejemplos avanzados

Galería de imágenes

<div class="galeria">
  <figure>
    <img src="foto1.jpg" alt="Montañas">
    <figcaption>Alpes suizos en invierno</figcaption>
  </figure>
  <figure>
    <img src="foto2.jpg" alt="Playa">
    <figcaption>Costa del Caribe al atardecer</figcaption>
  </figure>
</div>

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

Contenido multimedia mixto

<figure>
  <img src="diagrama.png" alt="Diagrama de flujo">
  <audio controls src="explicacion.mp3"></audio>
  <figcaption>Diagrama y explicación auditiva del proceso</figcaption>
</figure>

Buenas prácticas

1. Contenido autónomo: Usar para elementos que pueden moverse fuera del flujo principal sin afectar el significado.

2. Leyendas concisas: <figcaption> debe ser breve y relevante.

3. SEO: Incluir palabras clave en la leyenda para mejorar el posicionamiento.

Comparación con elementos similares

Elemento	Uso	Ejemplo
<figure>	Contenido + leyenda semántica	Imágenes con descripción
<div>	Contenedor sin significado	Agrupación visual
<aside>	Contenido relacionado pero secundario	Publicidad, enlaces externos

Conclusión:

La etiqueta <figure> es esencial para:

• Agrupar contenido multimedia con su contexto.
• Mejorar la accesibilidad y la estructura semántica.
• Facilitar el estilo y la organización de elementos complejos.

¡Úsala para enriquecer tus documentos con contenido bien explicado y profesional!