HTML Figure and Figcaption

by

HTML provides the <figure> and <figcaption> elements to display images, diagrams, code examples, and other self-contained content with captions. These elements help developers organize visual content and provide meaningful descriptions for users.

The <figure> element represents self-contained content, while the <figcaption> element provides a caption for that content. They are useful for articles, tutorials, educational websites, and documentation.

What Is the HTML Figure Element?

The HTML <figure> element represents self-contained content that is related to the main content of a webpage but can be understood independently. It commonly contains images, illustrations, diagrams, charts, or code examples.

HTML Figure Syntax

<figure>
    <img src="mountain.jpg" alt="Snow-covered mountain">
</figure>

In this example, the <figure> element groups the image into a single content unit.

What Is the HTML Figcaption Element?

The <figcaption> element provides a caption or description for the content inside a <figure> element. It can appear before or after the main content within the figure.

HTML Figcaption Syntax

<figure>
    <img src="flower.jpg" alt="A red rose">

    <figcaption>
        A red rose growing in a garden.
    </figcaption>
</figure>

Here, the <figcaption> element displays a caption below the image. Browsers usually display the caption as regular text, which you can customize using CSS.

HTML Figure and Figcaption Example

The following example demonstrates how to use both elements in a complete HTML webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Figure and Figcaption</title>

    <style>
        figure {
            max-width: 500px;
            margin: 20px auto;
        }

        figure img {
            width: 100%;
            height: auto;
        }

        figcaption {
            text-align: center;
            color: #555;
            font-size: 14px;
            margin-top: 8px;
        }
    </style>
</head>
<body>

    <h1>HTML Figure and Figcaption</h1>

    <figure>
        <img src="nature.jpg"
             alt="A lake surrounded by green mountains">

        <figcaption>
            A peaceful lake surrounded by mountains.
        </figcaption>
    </figure>

</body>
</html>

In this example, the <figure> element groups the image and its caption. CSS controls the image width, spacing, and caption appearance.

Make sure that nature.jpg exists in the correct folder so the browser can display it.

Difference Between Figure and Figcaption

ElementPurposeExample
<figure>Groups self-contained content, such as an image or diagram.<figure>...</figure>
<figcaption>Provides a caption for the figure’s content.<figcaption>Mountain view</figcaption>

The <figcaption> element must be placed inside a <figure> element. A figure can contain a caption at the beginning or end, but it should not contain multiple <figcaption> elements for the same figure.

Using Figcaption Above an Image

You can place the caption before the image when that layout suits your content.

<figure>
    <figcaption>Figure 1: The water cycle</figcaption>

    <img src="water-cycle.jpg"
         alt="Diagram showing evaporation, condensation, and precipitation">
</figure>

This example displays the caption before the image. You can use CSS to adjust the spacing and appearance.

Related HTML Tutorials

Continue learning HTML with these tutorials on Web4learners: