HTML5 figure Tag
Last Updated :
26 Dec, 2023
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:
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 >
< figure >
alt = "The Pulpit Rock" width = "304"
height = "228" >
< figcaption >Geeks logo</ figcaption >
</ figure >
</ 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 >
< figure >
< img src =
height = "228" >
< figcaption >Geeks logo</ figcaption >
</ figure >
</ body >
</ html >
|
Output:
Supported Browsers:Â
- Google Chrome 8
- Edge 12
- Firefox 4
- Opera 11
- Safari 5.1
Â
Share your thoughts in the comments
Please Login to comment...