<figure> : Figure with Optional Caption element

by

Introduction

The <figure> element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

Here’s a simple example:

<!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>
        body{
            background-color: black;
        }
        figure{
            background-color: gray;
        }
        img{
            width: 100%;
            height: 500px;
        }
        figcaption{
            text-align: center;
            font-size: 100px;
        }        
    </style>
</head>
<body>
    <figure>
        <img src="img.jpg" alt="A description of the image">
        <figcaption>Dodge Challenger</figcaption>
    </figure>           
</body>
</html>

Output :

In this example:

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

Key points about the <figure> element:

1. Grouping Content: It is used to group together related content that should be treated as a single unit.

2. Accessibility: When used with <figcaption>, it helps provide additional context or information about the content for accessibility purposes.

3. Media Content: It’s commonly used with images, videos, audio, diagrams, and other types of multimedia content.

4. Optional <figcaption>: While <figcaption> is optional, when included, it typically follows the content within <figure> to provide a caption for that content.

5. Multiple <figure> Elements: A document can contain multiple <figure> elements, each encapsulating different pieces of content.

<figure>
  <img src="image1.jpg" alt="Image 1">
  <figcaption>Caption for Image 1</figcaption>
</figure>
<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 use of <figure> and <figcaption> provides a way to structure content in a semantically meaningful manner, making it clear that certain content and its caption are related. This can enhance both the visual presentation and the accessibility of the content on the web.

Leave a Comment