figure y figcaption: una revisión

figure más allá de las imágenes

Listado de código en figure

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

Audio en figure

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

Vídeo en figure

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

Gráfico en figure

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

Diagrama SVG en figure

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

Cita en figure

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

alt frente a figcaption, revisado

<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

Ubicación de figcaption

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

Numeración de figures con contadores CSS

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

Cuándo no usar figure

Comprobación rápida

Resumen: figure, revisado