What is the <figure> element in HTML?

  John Mwaniki /    Updated on 07 Jul 2024

The <figure> element is an HTML5 element used to mark up multimedia content such as images, videos, diagrams, etc.

It is typically used in conjunction with the <figcaption> element, which is used to add a caption/description of the content within the <figure> element.

Syntax for the <figure> element

The syntax for the <figure> element is as follows:

<figure>
  <!-- content to be marked up -->
  <figcaption>Caption of the content</figcaption>
</figure>

The content to be marked up can be any multimedia content, such as images, videos, and illustrations.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Examples of using the <figure> element

Here are some examples of using the <figure> element:

Image with caption

<figure>
  <img src="car.jpg" alt="A beautiful car">
  <figcaption>A beautiful car</figcaption>
</figure>

In this example, an image of a beautiful car is marked up using the <figure> element. The <img> element is used to display the image, and the <figcaption> element provides a caption for the image.

Video with caption

<figure>
  <video src="video.mp4" controls></video>
  <figcaption>A video of kids playing</figcaption>
</figure>

In this example, a video of kids playing is marked up using the <figure> element. The <video> element is used to display the video, and the controls attribute is added to allow the user to control the playback of the video. The <figcaption> element provides a caption for the video.