<figcaption> : Figure Caption element

by

Introduction

The <figcaption> element in HTML is used to provide a caption or description for the content inside a <figure> element. The <figure> and <figcaption> elements are commonly used together to associate a caption with an image, diagram, video, or other content.

Here’s an example of how <figcaption> is used with <figure>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        figure{
            background-color: gray;
        }
        img{
            width: 100%;
            height: 500px;
        }
        figcaption{
            text-align: center;
            font-size: 100px;
        }        
    </style>
</head>
<body>
    <figure>
        <img src="car.png" alt="A description of the image">
        <figcaption>Caption for the image</figcaption>
    </figure>           
</body>
</html>

Output :

In this example:

  • The <figure> element contains an <img> element representing an image.
  • The <figcaption> element provides a caption for that image.

Key points about the <figcaption> element:

1. Association with <figure>: It is typically used inside a <figure> element to provide a caption for the content within that figure.

2. Accessible Content: The caption inside <figcaption> is often used to provide additional context or information about the content, enhancing accessibility for users.

3. Multiple <figcaption> Elements: A single <figure> element can have multiple <figcaption> elements, each providing a caption for a specific piece of content within the figure.

<figure>
  <img src="image1.jpg" alt="Image 1 description">
  <figcaption>Caption for Image 1</figcaption>
  <img src="image2.jpg" alt="Image 2 description">
  <figcaption>Caption for Image 2</figcaption>
</figure>

4. Other Types of Content: While commonly used with images, <figcaption> can also be used with other types of content inside <figure>, such as videos, diagrams, or code snippets.

<figure>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Caption for the video</figcaption>
</figure>

The combination of <figure> and <figcaption> provides a semantically meaningful way to associate captions with various types of content, making web documents more accessible and enhancing the user experience.

Leave a Comment