HTML <figure> Element

Publish in HTML Tutorial el 24/05/2025 14:28

The <figure> element represents self-contained content, often with a caption (<figcaption>), and is typically referenced as a single unit from the main flow of the document. It can contain images, diagrams, photos, code snippets, or other content that supports the main content but isn't essential for understanding it.

Key characteristics of <figure>:

It's a semantic container for content that's referenced from the main content
Can include an optional <figcaption> as its first or last child
Doesn't have to be only for images - can contain any related content
Helps with accessibility by grouping content with its caption

Basic Syntax

Examples of <figure> Usage

Example 1: Basic Image with Caption

The most common use of <figure> is to wrap an image with a caption.

Play Code

<figure>
  <img src="https://placehold.co/300x200/png" alt="Placeholder image">
  <figcaption>Figure 1: A placeholder image demonstrating the figure element</figcaption>
</figure>

Example 2: Code Snippet in Figure

<figure> can also contain code blocks with descriptions.

Play Code

<figure>
  <pre><code>
    function greet() {
      console.log("Hello, world!");
    }
    greet();
  </code></pre>
  <figcaption>Code 1: Simple JavaScript greeting function</figcaption>
</figure>

Example 3: Multiple Images in Single Figure

A single <figure> can contain multiple related images.

Play Code

<figure>
  <img src="https://placehold.co/300x200/png" alt="Thumbnail 1">
  <img src="https://placehold.co/300x200/png" alt="Thumbnail 2">
  <img src="https://placehold.co/300x200/png" alt="Thumbnail 3">
  <figcaption>Figure 2: Three related thumbnail images</figcaption>
</figure>

Example 4: Figure with JavaScript Interaction

This example shows how to dynamically change figure content with JavaScript.

Play Code

<figure id="dynamicFigure">
  <img src="https://placehold.co/300x200/png?text=Click+the+button" id="figureImage">
  <figcaption id="figureCaption">Initial caption</figcaption>
</figure>
<button onclick="changeFigure()">Change Figure</button>

<script>
  function changeFigure() {
    const randomNum = Math.floor(Math.random() * 1000);
    document.getElementById('figureImage').src = 
      `https://placehold.co/300x200/png?text=Image+${randomNum}`;
    document.getElementById('figureCaption').textContent = 
      `Updated figure ${randomNum}`;
  }
</script>

Example 5: Responsive Figure with CSS

This example demonstrates styling a figure with CSS for responsive design.

Play Code

<style>
  .styled-figure {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .styled-figure img {
    max-width: 100%;
    height: auto;
  }
  .styled-figure figcaption {
    font-style: italic;
    color: #666;
    margin-top: 8px;
  }
</style>

<figure class="styled-figure">
  <img src="https://placehold.co/300x200/png?" alt="Styled figure">
  <figcaption>Figure 3: A styled figure with custom CSS</figcaption>
</figure>

Tips and Tricks

Accessibility: Always include proper alt text for images inside figures
Styling: Use CSS to style figures consistently across your site
Semantics: Only use <figure> for content that's referenced from the main content
Responsiveness: Make sure figures and their content are responsive
Caption placement: <figcaption> can be either the first or last child of <figure>

Browser Support

The <figure> element is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It's also supported in Internet Explorer 9 and later.