HTML Tutorial
HTML Introduction
HTML Tutorial
HTML Tags
HTML Attributes
HTML Formatting
HTML Heading
HTML Paragraph
HTML Anchor
HTML Image
HTML Table
HTML Fonts
HTML Lists
HTML Ordered List
HTML Unordered List
HTML Description List
HTML Forms
HTML Forms
HTML Input Types
HTML Form Attributes
HTML Tags
HTML Title
HTML Marquee Tag
HTML Code
HTML Quotes
HTML Button Tag
HTML BR Tag
HTML HR Tag
HTML Bold Tag
HTML 5
HTML5 Tutorial
HTML Meter
HTML Article Tag
HTML Footer Tag
HTML Figure Tag
HTML Dialog Tag
HTML 5 Advance
HTML Doctype
HTML Meta Tags
HTML Styles
HTML Scripts
HTML Progress Tag
HTML Symbols
HTML Media
HTML Video Tag
HTML Audio Tag
HTML Youtube Video
HTML 5 Form
HTML Datalist Tag
HTML keygen Tag
HTML output Tag
HTML 5 Graphics
HTML Canvas
HTML SVG
Reading Section
Interview Questions
HTML 5 Quiz
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 :