Figures and Captions (<figure> and <figcaption>)

The <figure> element is used to encapsulate self-contained content, like an image, illustration, or code snippet, that is referenced from the main text. The <figcaption> element provides a semantic caption or legend for its parent <figure>, creating a clear, accessible link between the content and its description.

Example 1: Basic Image with a Caption

<figure>
  <img src="mountain-peak.jpg" alt="A snowy mountain peak against a blue sky.">
  <figcaption>Fig.1 - The peak of Mt. Rainier on a clear day.</figcaption>
</figure>

Explanation This code groups an image (<img>) and its description (<figcaption>) together. The <figure> element signals that they are related, which is great for SEO and accessibility.

Example 2: Figure with a Code Snippet

<figure>
  <figcaption>Listing 1 - A simple CSS 'hello world' example.</figcaption>
  <pre><code>p::before { content: "Hello"; }</code></pre>
</figure>

Explanation The <figure> is not limited to images. Here, it semantically groups a code block (<pre><code>) with a descriptive caption, indicating the code is a self-contained example.

Example 3: Multiple Images in One Figure

<figure>
  <img src="dog1.jpg" alt="A golden retriever playing.">
  <img src="dog2.jpg" alt="A beagle sleeping.">
  <figcaption>Two photos of different dog breeds.</figcaption>
</figure>

Explanation You can place multiple related images within one <figure> element. A single <figcaption> can then describe the entire group of content.

Example 4: Figure with a Blockquote

<figure>
  <blockquote>
    <p>The journey of a thousand miles begins with a single step.</p>
  </blockquote>
  <figcaption>—Lao Tzu</figcaption>
</figure>

Explanation This example demonstrates wrapping a <blockquote> within a <figure>. The <figcaption> is used to attribute the quote to its author.

Example 5: Figure with a Diagram

<figure>
  <img src="flowchart.svg" alt="A flowchart showing a simple process.">
  <figcaption>Fig.2 - The user login workflow.</figcaption>
</figure>

Explanation The <figure> element is ideal for any visual content that requires a description. This includes SVG diagrams, charts, and other illustrations referenced in your document.