HTML5 figure Tag

Last Updated : 26 Aug, 2024

The <figure> tag is used to insert self-contained content such as illustrations, diagrams, photos, or code listings in a document. It can be placed at any position in the document and is related to the main flow. The content inside the <figure> tag goes with the flow of the document, so if it is removed, it won't affect the flow of the document. This tag is a new addition to HTML5.

To add a description or caption for the content inside the <figure> tag, we use the <figcaption> tag. The <figure> tag also supports the Global Attribute and Event Attributes in HTML

Syntax:

<figure> Image content... </figure>

Attributes:

Attribute Values	Description
img src	This tag is used to add an image source to the document.
figcaption	This tag is used to set the caption to the image.

Example 1: In this example, we will see the implementation of figure tag with an example.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        &lt;figure&gt; Tag
    </h2>
    <!--HTML figure tag starts here-->
    <figure>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" 
            alt="The Pulpit Rock" width="304"
            height="228">
        <figcaption>Geeks logo</figcaption>
    </figure>
    <!--HTML figure tag ends here-->
</body>

</html>

Output:

Example 2: In this example, we will see the implementation of figure tag with another example.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Figure Tag Geeks</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
        }

        h1 {
            background-color: #333;
            color: #fff;
            padding: 15px;
        }

        figure {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #fff;
            display: inline-block;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }

        figcaption {
            margin-top: 10px;
            font-style: italic;
            color: #555;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Figure Tag Example</h2>

    <!-- HTML figure tag starts here -->
    <figure>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" 
             alt="Geeks Logo" 
             width="304"
             height="228">
        <figcaption>Geeks logo</figcaption>
    </figure>
    <!-- HTML figure tag ends here -->

</body>

</html>