Open In App
Related Articles

HTML5 figure Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>
        <figure> Tag
    </h2>
    <!--HTML figure tag starts here-->
    <figure>
        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=
            height="228">
        <figcaption>Geeks logo</figcaption>
    </figure>
    <!-- HTML figure tag ends here -->
 
</body>
 
</html>

                    

Output:

Screenshot-2023-12-22-092826

Supported Browsers: 

  • Google Chrome 8
  • Edge 12
  • Firefox 4
  • Opera 11
  • Safari 5.1
     


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads