HTML <figcaption> Element

Publish in HTML Tutorial el 23/05/2025 23:11

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element. It provides semantic meaning to images, diagrams, illustrations, code snippets, or other media content by allowing you to associate a visible description.

Key characteristics of <figcaption>:

Must be placed inside a <figure> element
Can be the first or last child of the <figure>
Improves accessibility by providing context
Helps with SEO by associating text with media

Basic Syntax

Here's the basic structure of how <figcaption> is used:

Examples

Example 1: Basic Image with Caption

A simple image with a descriptive caption below it:

Play Code

<figure>
  <img src="https://placehold.co/300x200/png" alt="Sample image">
  <figcaption>Figure 1: A placeholder image demonstrating proper caption usage</figcaption>
</figure>

Example 2: Code Snippet with Caption

Showing a code block with an explanatory caption:

Play Code

<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>Code 1: JavaScript greeting function with template literal</figcaption>
</figure>

Example 3: Multiple Images with Group Caption

Grouping several images under one caption:

Play Code

<figure>
  <img src="https://placehold.co/300x200/png" alt="Image 1">
  <img src="https://placehold.co/300x200/png" alt="Image 2">
  <img src="https://placehold.co/300x200/png" alt="Image 3">
  <figcaption>Figure 2: Three placeholder images showing consistent sizing</figcaption>
</figure>

Example 4: Dynamic Caption with JavaScript

Changing the caption text using JavaScript:

Play Code

<figure>
  <img src="https://placehold.co/300x200/png" alt="Dynamic image">
  <figcaption id="dynamic-caption">Original caption</figcaption>
</figure>
<button onclick="updateCaption()">Update Caption</button>

<script>
function updateCaption() {
  const captions = [
    "Updated caption with new information",
    "Current date: " + new Date().toLocaleDateString(),
    "User clicked at: " + new Date().toLocaleTimeString()
  ];
  const randomCaption = captions[Math.floor(Math.random() * captions.length)];
  document.getElementById('dynamic-caption').textContent = randomCaption;
}
</script>

Example 5: Interactive Figure with JavaScript

Creating an interactive figure that responds to user actions:

Play Code

<figure>
  <div id="color-box" style="width:200px;height:200px;background:#ccc;"></div>
  <figcaption id="color-caption">Current color: Light Gray</figcaption>
</figure>
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('green')">Green</button>
<button onclick="changeColor('blue')">Blue</button>

<script>
function changeColor(color) {
  const box = document.getElementById('color-box');
  const caption = document.getElementById('color-caption');
  
  box.style.background = color;
  
  const colorNames = {
    red: 'Red',
    green: 'Green',
    blue: 'Blue'
  };
  
  caption.textContent = `Current color: ${colorNames[color]}`;
}
</script>

Tips and Tricks

Accessibility: Always include proper alt text for images before adding a figcaption.
Positioning: The figcaption can be placed either before or after the content in the figure.
Styling: Use CSS to style your figcaptions consistently across your site.
SEO: Include relevant keywords in your captions when appropriate.
Length: Keep captions concise but descriptive enough to be useful.
Numbering: For academic or technical content, consider numbering your figures.

Browser Support

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