html tutorial - Figure <figure> tag in HTML - html5 - html code - html form
Learn html - html tutorial - figure tag in html - html examples - html programs
- The <figure> tag is used to specifies self-contained content, like diagrams, photos, code listings, illustrations, etc.
- The <figure> element content is related to the main flow.
- The <figure> element position is independent of the main flow.
- If removed the <figure>element is should not affect the document flow.
- <figure> tag supports Global Attributes and Event Attributes.
Syntax for Figure:
<figure>Content</figure>Differences between HTML 4.01 and HTML5
HTML 4.01
- The HTML 4 is does not supports <figure> tag.
HTML5
- The HTML 5 is supports <figure>tag.
Sample Coding for <figure> tag:
Tryit<!DOCTYPE html>
<html >
<head>
<title>Wikitechy figure tag</title>
</head>
<body>
<h2>HTML figure tag with example</h2>
<figure>
<img src="https://www.wikitechy.com/images/logo.png"
alt="Wikitechy logo" width="300" height="200">
</figure>
</body>
</html>Code Explanation for <figure> tag:
- The <figure>tag is used to give the image and alternative text for an image with a specific size.
Output of <figure> tag:
- The output shows the wikitechy logo by using <figure>tag.
Browser Support for <figure> tag in HTML:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
- The <figure>element is adding a caption by using <figcaption> element.