HTML - HTML <figure> and <figcaption> Elements

The HTML <figure> and <figcaption> elements are used to organize and describe self-contained content such as images, diagrams, illustrations, charts, code examples, or other visual content. They are especially useful when a piece of content has a caption or description that should be semantically connected to it.

1. What is the `<figure>` Element?

The <figure> element represents self-contained content that is related to the main content of a webpage but can also stand on its own.

For example, an article may contain an image showing a computer network. The image can be placed inside a <figure> element because it is an independent visual item related to the article.

Basic syntax:

<figure>
    <img src="network.jpg" alt="Computer network diagram">
</figure>

The <figure> element does not itself display an image. Instead, it acts as a semantic container for the image or other related content.

2. What is the `<figcaption>` Element?

The <figcaption> element provides a caption or description for the content inside a <figure> element.

Example:

<figure>
    <img src="network.jpg" alt="Computer network diagram">
    <figcaption>Basic structure of a computer network.</figcaption>
</figure>

Here:

<figure> contains the complete figure.
<img> displays the image.
<figcaption> describes or identifies the image.
The caption is semantically associated with the figure.

3. Why Use `<figure>` and `<figcaption>`?

A normal <div> can be used to group an image and text, but it does not tell the browser what the relationship between the content and the text means.

For example:

<div>
    <img src="mountain.jpg" alt="Mountain landscape">
    <p>Mountain landscape during sunrise.</p>
</div>

This works visually, but the browser does not know that the paragraph is specifically a caption for the image.

Using <figure> and <figcaption> provides clearer semantic meaning:

<figure>
    <img src="mountain.jpg" alt="Mountain landscape">
    <figcaption>Mountain landscape during sunrise.</figcaption>
</figure>

This makes the structure of the document more meaningful.

4. Using `<figure>` with Images

The most common use of <figure> is with images.

Example:

<figure>
    <img src="tajmahal.jpg" alt="The Taj Mahal in Agra">
    <figcaption>The Taj Mahal in Agra, India.</figcaption>
</figure>

The image and its caption are treated as one independent piece of content.

This is useful in:

News articles
Blogs
Educational websites
Travel websites
Photography websites
Technical documentation
Online magazines

5. Using `<figure>` with Diagrams

A figure does not have to contain an image file. It can contain other types of content.

For example:

<figure>
    <p>Client → Server → Database</p>
    <figcaption>Basic communication between a client, server, and database.</figcaption>
</figure>

A diagram or illustration can therefore be grouped with its explanatory caption.

6. Using `<figure>` with Tables

A table can also be placed inside a <figure> when it represents independent content that needs a caption.

Example:

<figure>
    <table>
        <tr>
            <th>Language</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>HTML</td>
            <td>1993</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>1996</td>
        </tr>
    </table>

    <figcaption>Selected milestones in web development.</figcaption>
</figure>

However, for tables specifically intended as data tables, the <caption> element is generally more appropriate for the table's title.

7. Using `<figure>` with Code

The <figure> element can also be useful for displaying an independent code example with a description.

<figure>
    <pre>
        <code>
            &lt;h1&gt;Welcome to HTML&lt;/h1&gt;
        </code>
    </pre>

    <figcaption>A simple HTML heading example.</figcaption>
</figure>

This is useful in programming tutorials and technical documentation.

8. Position of `<figcaption>`

The <figcaption> element can appear before or after the main content inside <figure>.

For example:

<figure>
    <figcaption>Figure 1: Web development workflow</figcaption>
    <img src="workflow.jpg" alt="Web development workflow">
</figure>

It can also appear after the image:

<figure>
    <img src="workflow.jpg" alt="Web development workflow">
    <figcaption>Figure 1: Web development workflow</figcaption>
</figure>

Both structures are valid.

9. `<figure>` Can Contain Multiple Items

A figure can contain more than one related element.

For example:

<figure>
    <img src="chart.jpg" alt="Sales chart">
    <p>Sales increased steadily during the year.</p>
    <figcaption>Annual sales performance.</figcaption>
</figure>

The content inside the figure should form a meaningful, self-contained unit.

10. Difference Between `<figure>` and `<div>`

The main difference is semantic meaning.

`<figure>`	`<div>`
Represents self-contained content	Generic container
Has semantic meaning	Has little semantic meaning by itself
Commonly used with `<figcaption>`	Does not have a dedicated caption element
Suitable for images, diagrams, charts, code, etc.	Used for general grouping and layout
Communicates the purpose of the content	Mainly groups elements

For example:

<figure>
    <img src="chart.png" alt="Sales chart">
    <figcaption>Monthly sales performance.</figcaption>
</figure>

is more meaningful than:

<div>
    <img src="chart.png" alt="Sales chart">
    <p>Monthly sales performance.</p>
</div>

when the text is specifically a caption.

11. `<figure>` Is Not Limited to Images

One common misunderstanding is that <figure> is only for photographs.

It can represent many types of self-contained content, including:

Photographs
Illustrations
Charts
Graphs
Diagrams
Maps
Audio or video
Code examples
Tables
Other independently referenced content

For example:

<figure>
    <video controls>
        <source src="html-tutorial.mp4" type="video/mp4">
    </video>
    <figcaption>Introduction to HTML elements.</figcaption>
</figure>

12. Accessibility Considerations

The <figure> and <figcaption> elements provide meaningful document structure. This can help assistive technologies understand the relationship between a piece of content and its caption.

For images, an appropriate alt attribute should still be provided:

<figure>
    <img src="computer.jpg" alt="Desktop computer connected to a network">
    <figcaption>Example of a computer connected to a network.</figcaption>
</figure>

The alt attribute and <figcaption> serve different purposes.

The alt attribute provides alternative text for the image, while <figcaption> provides a visible caption associated with the figure.

13. Styling `<figure>` with CSS

By default, browsers may apply some basic styling to figures. CSS can be used to customize their appearance.

HTML:

<figure class="product-image">
    <img src="laptop.jpg" alt="Laptop computer">
    <figcaption>Modern laptop computer.</figcaption>
</figure>

CSS:

.product-image {
    text-align: center;
    margin: 20px auto;
}

.product-image img {
    max-width: 100%;
}

.product-image figcaption {
    margin-top: 8px;
    font-size: 14px;
}

The HTML provides the semantic structure, while CSS controls the visual presentation.

14. Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Figure Example</title>
</head>
<body>

    <h1>Computer Networks</h1>

    <p>
        A computer network allows multiple devices to communicate
        and share resources.
    </p>

    <figure>
        <img
            src="network.jpg"
            alt="Diagram showing computers connected to a network"
            "
        >
        <figcaption>
            Figure 1: A basic computer network connecting multiple devices.
        </figcaption>
    </figure>

    <p>
        Networks can be used to share files, printers, applications,
        and other resources.
    </p>

</body>
</html>

In this example, the network image is an independent visual component of the article. The <figcaption> clearly identifies what the image represents.

15. Important Points to Remember

The <figure> element is a semantic HTML element used for self-contained content. The <figcaption> element provides a caption for that content.

The <figcaption> should be placed inside the <figure> element. It can be positioned before or after the main figure content.

<figure> is commonly used with images, but it can also contain diagrams, charts, videos, audio, code examples, and other independent content.

For images, <figcaption> does not replace the alt attribute. The alt attribute remains important for providing alternative text for the image.

The major advantage of <figure> and <figcaption> is that they give the document clear semantic structure, making the relationship between an independent piece of content and its caption explicit.

HTML - HTML <figure> and <figcaption> Elements

1. What is the <figure> Element?

2. What is the <figcaption> Element?

3. Why Use <figure> and <figcaption>?

4. Using <figure> with Images

5. Using <figure> with Diagrams

6. Using <figure> with Tables

7. Using <figure> with Code

8. Position of <figcaption>

9. <figure> Can Contain Multiple Items

10. Difference Between <figure> and <div>

11. <figure> Is Not Limited to Images

12. Accessibility Considerations

13. Styling <figure> with CSS

14. Complete Example

15. Important Points to Remember

1. What is the `<figure>` Element?

2. What is the `<figcaption>` Element?

3. Why Use `<figure>` and `<figcaption>`?

4. Using `<figure>` with Images

5. Using `<figure>` with Diagrams

6. Using `<figure>` with Tables

7. Using `<figure>` with Code

8. Position of `<figcaption>`

9. `<figure>` Can Contain Multiple Items

10. Difference Between `<figure>` and `<div>`

11. `<figure>` Is Not Limited to Images

13. Styling `<figure>` with CSS