The <figure> semantic HTML element is used to encapsulate media such as an image, diagram, or code snippet.


<figure> is a tag that wraps around a block of HTML giving it semantic meaning. It has no special attributes, and by default will act similarly to a <div>.

<!-- An image, diagram, or code snippet goes inside the tag -->

The <figcaption> element is used to describe the media encapsulated within the <figure> element. Developers will normally use <figcaption> within the <figure> element to group the media and description. This way, if a developer decides to change the position of the media, the description will follow along with it.

<img src="qwerty.jpg" />
<figcaption>The image shows the layout of a qwerty keyboard.</figcaption>


Suppose the current page wants to include an image and a image caption:

<!DOCTYPE html>
<head> </head>
<h2>Functional Programming in JavaScript</h2>
One of the fun things we can do with functional programming in
JavaScript is <b>currying</b>. Here we have an example of taking a
function with two inputs and turning it into a curried version:
<!-- The figure element -->
<img src="currying.gif" />
The GIF shows the transition from a normal function to a curried


Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn HTML on Codecademy