Home »
HTML »
HTML Figure Tag
HTML Figure Tag
The HTML <figure> tag is used to mark up a photo in the document on a web page.
HTML 5 <figure> tag can contain a group of diagrams, photos, etc. We can also add a caption for the photo with the help of <figcaption> tag.
HTML Figure Tag
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Figure Tag </title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<figure>
<img src="PUBG.png" alt="HTML Image" width="500" height="300">
</figure>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Figure Tag </title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<figure>
<img src="PUBG.png" alt="HTML Image" width="500" height="300">
</figure>
</body>
</html>
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Note: The <figure> tag is not supported in Internet Explorer 8 and earlier versions.
HTML Figcaption
The<figcaption> element is used to provide a caption to an image. It is an optional tag.
Only one <figcaption> element can be nested inside a <figure> tag.
HTML Figure Caption Tag
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Figcaption Tag </title>
</head>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around
Alberobello, a declared UNESCO World Heritage Site.</p>
<figure>
<img src="HTML-Image.png" alt="Html Image" style="width:100%">
<figcaption>Fig.1 - HTML, Computer Image. </figcaption>
</figure>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Figcaption Tag </title>
</head>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around
Alberobello, a declared UNESCO World Heritage Site.</p>
<figure>
<img src="HTML-Image.png" alt="Html Image" style="width:100%">
<figcaption>Fig.1 - HTML, Computer Image. </figcaption>
</figure>
</body>
</html>
Output
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<figure> |
Recommended :