HTML5 Figure Element Tutorial

Last update on August 19 2022 21:51:37 (UTC/GMT +8 hours)

Figure Element

In this page, we have discussed Description, Usage, Attributes, Example and Result, Compatibility of HTML5 figure element.

The HTML figure element represents an image, illustration, diagram or piece of code. Often figure element is accompanied by figcaption element.

Usage

<!-- usage of figure -->
<figure>
<img src="picture.jpg" alt="An example picture">
</figure>
<!-- Usage of figure with figcaption -->
<figure>
<img src="picture.jpg" alt="An example picture">
<figcaption>Caption for the example picture</figcaption>
</figure>

Noteworthy features of figure element

Which kind of content can reside within figure element	A `figcaption` element, followed by flow content; or flow content followed by a `figcaption` element.
Whether start and end tags are required	Yes, both the start tag and the end tag are mandatory.
Which elements can contain figure element	Any element that accepts flow elements.

Attributes

This element has no other attributes than the global attributes, common to all elements.

Example:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Example HTML5 figure element</title>
</head>
<body>
<figure>  
<img src="/images/w3logo5.gif" alt="logo">
<figcaption>This is the logo of w3resource.com </figcaption>
</figure>
</body>
</html>

Compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Supported)	4.0 (2.0)	9.0	11.0	4.0

Previous: HTML5 embed Element Tutorial
Next: HTML5 Figcaption Tag Tutorial