The **`<figure>` element** in #key# HTML: Hypertext Markup Language #key# is referred to as a self-contained, single content block. We can keep code snippets, illustrations, diagrams, pictures, etc., together in a single tag. It helps to easily add or remove content without any errors.

# 
#  Syntax
Content, tags, or headings should be enclosed between opening and closing tags.


```html
<figure> ....... </figure>
```

##
## Attributes
This tag supports both global and event attributes. CSS can be used to make the content responsive in the `figure` element.



## Code
In the code snippet, the `<figure>` tag is being used from *line 12* to *line 15* which contain the `<img>` and `<figcaption>` elements. The final output contains an `Educative` logo and its caption at the bottom.

<html>
 <head>
   <style>
     figcaption{
       text-align: center;
       width:30%;
     }
   </style>
 </head>
 <body>
   <h1>Hi, I am using Figure element</h1>
    <figure>
    <img src="https://www.educative.io/static/imgs/logos/MainLogoV2.png" alt="logo" style="width:30%">
    <figcaption ><strong>Educative Logo Here</strong></figcaption>
  </figure>
 </body>
</html>

codemirror

What is the <figure> element in HTML?

The `<figure>` tag defines self-contained content like code snippets, images, and diagrams with accompanying captions.