HTML Figure Caption: The <figcaption> Tag Explained

Table of Contents

HTML `<figcaption>` Tag

The <figcaption> tag defines a caption or legend for a <figure> element. It's used to provide a descriptive text explaining the content of the figure, whether it’s an image, a diagram, a code snippet, or any other type of embedded content. The <figcaption> tag enhances the semantic structure of HTML documents, making them more accessible and understandable.

Syntax

<figcaption>
  Caption text
</figcaption>

Attributes

The <figcaption> tag does not support any specific attributes. It inherits global attributes applicable to all HTML elements.

Attribute	Value	Description
class	classname	Specifies one or more class names for an element.
id	idname	Specifies a unique id for an element.
style	CSS properties	Specifies an inline CSS style for an element.
title	text	Specifies extra information about an element.
accesskey	character	Specifies a keyboard shortcut to activate/focus on the element.
hidden	hidden	Specifies that the element is not yet, or is no longer, relevant.
lang	language_code	Specifies the language of the element's content.
tabindex	number	Specifies the tabbing order of the element.
dir	ltr/rtl	Specifies the text direction for the element.
contenteditable	true/false	Specifies if the content of the element is editable.
data-*	value	Used to store custom data private to the page or application.

Example

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A stunning landscape with mountains and a clear blue sky.</figcaption>
</figure>

More Examples

Example 1: With a diagram

<figure>
  <img src="diagram.png" alt="Flowchart of a process">
  <figcaption>Flowchart depicting the steps in a specific process.</figcaption>
</figure>

Example 2: Positioning the caption above the figure

While the default is to display the <figcaption> below the figure content, you can use CSS to position it differently.

<figure class="caption-top">
    <figcaption>A graph showing the growth of website traffic.</figcaption>
    <img src="graph.png" alt="Website traffic graph">
</figure>

.caption-top figcaption {
  text-align: center;
}

.caption-top {
    display:flex;
    flex-direction: column;
}

Example 3: Using with different media type

<figure>
  <video src="video.mp4" controls width="320" height="240">Your browser does not support the video tag.</video>
  <figcaption>Short video showcasing a product demo.</figcaption>
</figure>

Example 4: Using with code example

<figure>
    <pre>
        <code>
    function greet(name) {
      console.log('Hello, ' + name + '!');
    }
    greet("User");
        </code>
    </pre>
    <figcaption>JavaScript function to greet a user.</figcaption>
</figure>

Example 5: Adding styling to caption

<figure>
    <img src="city-night.jpg" alt="City at night" width="400">
    <figcaption style="font-style: italic; color: gray; font-size:0.9em;">A vibrant city at night</figcaption>
</figure>

Browser Support

The <figcaption> tag is supported by all modern browsers:

Chrome
Edge
Firefox
Safari
Opera

Notes and Tips

The <figcaption> element should be the first or last child of its parent <figure> element.
Using <figcaption> improves accessibility, especially for screen readers. It provides context to the content within the <figure>.
It's semantically more correct to use <figcaption> within a <figure> for captions rather than generic elements like <div> or <p>.
While it's possible to position the caption using CSS, consider the logical and semantic flow of content when designing your layout.
The <figcaption> element is not meant for arbitrary text, it specifically describes the figure it belongs to.
Use short and descriptive text for captions that provides the right context of the figure.