HTML5 figure Tag

The <figure> tag in HTML is used to include self-contained content like images, diagrams, or code that is related to the main content but can stand independently.

Used for illustrations, images, diagrams, or code snippets.
Content is related to the main flow but can be moved or removed without affecting it.
Introduced in HTML5 for better semantic structure.

Syntax:

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

Attributes

<img src="">: The img src attribute is used to specify the image source and add an image to the document.
<figcaption>: The figcaption tag is used to provide a caption or description for the content inside the <figure> element.

Example: Implementation of figure tag.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        &lt;figure&gt; Tag
    </h2>
    <!--HTML figure tag starts here-->
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
    <!--HTML figure tag ends here-->
</body>

</html>
<!--Driver Code Ends-->

Attributes

Example: Implementation of figure tag.

Explore