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


<!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>

Output

HTML Figure Tag Examples

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.

HTML Image

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


<!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>

Output

HTML Figcaption Tag Examples
Html Image
Fig.1 - HTML, Computer Image.

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<figure>
Yes
Yes
Yes
Yes
Yes









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.