HTML figcaption Tag Tutorial

In this section, we will learn what <figcaption> element is and how it works.

What is <figcaption> Tag in HTML and How to add Caption to a Photo?

HTML <figcaption> comes within the body of <figure> element and is used to set a caption for the target elements that also sit within the body of <figure> element.

So in short, <figcaption> is used to set a caption of the rest of content within the body of <figure> element.

HTML <figcaption> Tag Syntax:

<figcaption> caption </figcaption>

HTML <figcaption> Tag Values

The value we set for this element is the caption that we want the target content within the <figure> container to have.

Example: caption on images

See the Pen caption on images by Omid Dehghan (@odchan1) on CodePen.

Example: HTML image with caption

See the Pen HTML image with caption by Omid Dehghan (@odchan1) on CodePen.

You might be thinking that using a <p> element under the target image could act as the caption of that image. But as the example above shows, there’s a huge difference between using <figcaption> and <p> element!

Leave a Reply