HTML Academy · Lección

figure y figcaption

Envuelva imágenes en contenedores figure semánticos con leyendas.

figure y figcaption es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué es figure?

El elemento <figure> marca contenido independiente al que se hace referencia desde el texto principal:

Imágenes con pies de foto
Listados de código
Diagramas, gráficos e ilustraciones
citas

La característica principal es que, si se elimina del flujo principal, el texto circundante sigue teniendo sentido.

figure con figcaption

<figcaption> proporciona un pie de foto para la figura:

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

Posición de figcaption

<figcaption> se puede colocar antes o después del contenido principal:

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Accesibilidad: alt frente a figcaption

Comprenda la diferencia:

alt: describe el contenido de la imagen para los lectores de pantalla y cuando la imagen no se carga
figcaption: pie de foto visible que proporciona contexto, fuente o explicación

Cumplen funciones diferentes y no deberían duplicarse.

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

Listado de código en figure

Use <figure> para ejemplos de código con etiquetas:

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Cita en figure

<figure> funciona muy bien con <blockquote>:

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

Varias imágenes en figure

Una figura puede contener varias imágenes relacionadas:

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure frente a div

Cuándo usar <figure> frente a <div>:

Use <figure> cuando el contenido se pueda trasladar a un apéndice
Use <figure> cuando necesite un pie de foto visible
Use <div> para contenedores de diseño o grupos de imágenes que no sean independientes

Enlazar figuras desde el texto

Haga referencia a las figuras desde el texto principal:

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

figure no es obligatorio para las imágenes

No es necesario envolver todas las imágenes en <figure>:

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

Aplicar estilos a figure y figcaption

CSS habitual para las figuras:

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

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

Comprobación rápida

¿Cuál es la diferencia principal entre el texto alt y figcaption?

Repaso: figure y figcaption

Aspectos esenciales de figure:

<figure>: contenido independiente al que se hace referencia desde el texto principal
<figcaption>: pie de foto visible, primer o último hijo de figure
alt: descripción invisible para los lectores de pantalla
figcaption: contexto visible para todos los usuarios
Funciona con imágenes, código, citas y gráficos

Preguntas frecuentes

¿La lección «figure y figcaption» es gratis?

Sí — el texto completo de «figure y figcaption» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «figure y figcaption»?

Envuelva imágenes en contenedores figure semánticos con leyendas. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «figure y figcaption»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a HTML Academy