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 1: Implementation of figure tag.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>
<figure> 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: Implementation of figure tag.
<!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>
Output:
