w3resource logo


HTML5 Figure Element Tutorial

HTML5 Figure Element Tutorial

Secondary Nav

Introduction

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

Description

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