HTML <figure> Tag

The HTML <figure> tag is used to group self-contained content such as images, illustrations, diagrams, charts, or other media elements along with their associated captions. It provides semantic meaning to the content and helps improve the accessibility and structure of web pages.

Typically, the <figure> tag is paired with the <figcaption> tag to provide a caption for the grouped content. The <figure> element and its content are treated as a single unit that can be moved or positioned independently.

Basic Syntax of HTML <figure> Tag

The basic syntax of the <figure> tag is:

</>
Copy
<figure>
    Media content (e.g., images, videos, or diagrams)
    <figcaption>Caption for the content</figcaption>
</figure>

The <figcaption> element provides a descriptive caption for the <figure> content. It can appear as the first or last child of the <figure> tag.

Attributes of HTML <figure> Tag

  • Global Attributes: The <figure> tag supports all global attributes, such as id, class, style, and title.
  • Event Attributes: The <figure> tag supports event attributes such as onclick, onmouseover, and onfocus.

Basic Example of HTML <figure> Tag

Here’s an example of using the <figure> tag to group an image and its caption:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Image with Caption</h2>
        <figure>
            <img src="mountains.jpg" alt="Snow-capped mountains" width="500">
            <figcaption>Snow-capped mountains under a clear blue sky.</figcaption>
        </figure>
    </body>
</html>
Basic Example of HTML <figure> Tag

Explanation: The <figure> groups the image and its caption together as a single unit.

Using <figure> with Videos

The <figure> tag can also be used to group videos with their captions:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Video with Caption</h2>
        <figure>
            <video controls width="500">
                <source src="ScreenRecording198.mov" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <figcaption>A screen recording of HTML tutorial.</figcaption>
        </figure>
    </body>
</html>
Using <figure> with Videos

Explanation: The <figure> groups the video and its caption, treating them as a single semantic unit.

Styling the <figure> Tag with CSS

You can style the <figure> and <figcaption> tags using CSS to enhance their appearance:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            figure {
                border: 2px solid #ddd;
                padding: 10px;
                margin: 20px auto;
                text-align: center;
                width: 400px;
            }

            figcaption {
                font-style: italic;
                color: #555;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Figure Example</h2>
        <figure>
            <img src="mountains.jpg" alt="Mountains" width="400">
            <figcaption>Mountains under blue sky.</figcaption>
        </figure>
    </body>
</html>
Styling the <figure> Tag with CSS

Result: The figure has a styled border and padding, and the caption appears italicized and centered below the image.

Practical Applications of the <figure> Tag

  • Image Galleries: Group images with captions for better organization in photo galleries.
  • Data Visualizations: Use <figure> to group charts, graphs, or infographics with explanatory captions.
  • Educational Content: Include diagrams or illustrations with descriptive captions in learning materials.
  • Accessibility: Improve accessibility by associating captions with visual or media content.

Advanced Example: Figures with Multiple Images

The <figure> tag can group multiple images with a single caption:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Multiple Images in a Figure</h2>
        <figure>
            <img src="lake.jpg" alt="A tranquil lake" width="300">
            <img src="mountain.jpg" alt="A majestic mountain" width="300">
            <figcaption>A serene lake and a majestic mountain captured during a hike.</figcaption>
        </figure>
    </body>
</html>

Explanation: The <figure> groups two images together with a shared caption, presenting them as a cohesive unit.