HTML <figure> and <figcaption> Tag

In this tutorial, we will learn about the HTML <figure> and <figcaption> tags with the help of examples.

HTML <figure> Tag

The HTML <figure> tag is a semantic tag that represents self-contained graphical content such as illustrations, diagrams, photos, etc. For example,

<figure>
    <img src="/sites/default/files/pc_logo.svg" width = "300" height = "247">
</figure>

Browser Output

HTML Figure element with an image

HTML <figcaption> Tag

The HTML <figcaption> tag is used to define the caption for a figure. It is placed as a child element of the <figure> tag along with the content. For example,

<figure>
    <img src="/sites/default/files/pc_logo.svg" width = "300" height = "247">
    <figcaption>Learn to code for free.</figcaption>
 </figure>

Browser Output

HTML Figure element with an image and a caption

Table of Contents