<figure> y <figcaption>

Podés poner un párrafo debajo de una imagen para describirla. Pero ese texto es solo texto suelto — el navegador no sabe que está relacionado con la imagen. <figure> y <figcaption> crean una unidad semántica: una imagen con su descripción asociada.

---

La diferencia entre texto suelto y semántica

<!-- Sin semántica: imagen y texto no están relacionados explícitamente -->
<img src="gato.jpg" alt="Un gato naranja durmiendo">
<p>El gato Michi, durmiendo en su sillón favorito.</p>

<!-- Con semántica: <figure> declara que imagen y descripción son una unidad -->
<figure>
  <img src="gato.jpg" alt="Un gato naranja durmiendo en un sillón">
  <figcaption>El gato Michi, durmiendo en su sillón favorito.</figcaption>
</figure>

En el sandbox la imagen no carga (no hay servidor de archivos), pero el check confirma que la estructura del elemento es correcta.

---

Anatomía

• <figure> — el contenedor semántico. Agrupa el contenido principal (la imagen) con su descripción.
• <figcaption> — el pie de figura. Va dentro de <figure>, como primer o último hijo. Describe o referencia el contenido del <figure>.

<figcaption> siempre dentro de <figure>: un <figcaption> fuera de un <figure> es inválido — el navegador lo renderiza como texto suelto y pierde toda la semántica.

<!-- ❌ MAL: figcaption fuera del figure -->
<figure>
  <img src="paisaje.jpg" alt="Montañas nevadas al atardecer">
</figure>
<figcaption>Fotografía de los Andes.</figcaption>

<!-- ✅ BIEN: figcaption dentro del figure -->
<figure>
  <img src="paisaje.jpg" alt="Montañas nevadas al atardecer">
  <figcaption>Fotografía de los Andes.</figcaption>
</figure>

---

alt y <figcaption> no son lo mismo

• alt — descripción para quien no puede ver la imagen: lectores de pantalla, cuando la imagen no carga. No es visible en la página.
• <figcaption> — pie de figura visible para todos los usuarios. Puede dar contexto editorial que no está en el alt.

Pueden complementarse:

<figure>
  <img src="paisaje.jpg" alt="Montañas nevadas al atardecer">
  <figcaption>Fotografía tomada en la Cordillera de los Andes, Argentina, 2024.</figcaption>
</figure>

El alt describe lo que se ve en la imagen; el <figcaption> agrega contexto de dónde y cuándo fue tomada.

---

<figure> no es solo para imágenes

<figure> puede contener cualquier contenido que forme una unidad con su descripción:

<!-- Un bloque de código con su explicación -->
<figure>
  <pre><code>const saludo = "Hola";</code></pre>
  <figcaption>Variable de tipo string en JavaScript.</figcaption>
</figure>

Pero en este módulo el caso de uso principal es la imagen con pie de página.

---

Tu turno: el starter tiene la estructura en comentarios. Creá el <figure> con el <img> y el <figcaption> como hijo directo. El texto del <figcaption> debe ser exacto, incluyendo el punto final. Luego hacé clic en “Comprobar”.