HTML - <figcaption> Tag

A caption for an image can be added using the <figcaption> element. It is an optional tag that may come before or after the content included within the <figure> tag. Despite the fact that the <figure> element itself may include numerous other elements like <img> or <code>, only one <figcaption> element may be nested within a <figure> tag. The <figcaption> element is used with the <figure> element and can be positioned as either the first or last child of the <figure> element.

Syntax

Following is the syntax of the <figcaption> tag −

<figcaption>
   figure caption...
</figcaption>

Example

Following is an example where we are going to use the <figcaption> tag and add the caption to the image.

<!DOCTYPE html>
<html>
<body>
   <figure>
      <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="logo" style="width:50%">
      <figcaption> Tutorialspoint Logo </figcaption>
   </figure>
</body>
</html>

When we execute the above code, it will generate an output consisting of an image uploaded along with a caption for the image that has been displayed on the webpage.

Example

Considering another scenario where we are going to use the <figcaption> tag with CSS.

<!DOCTYPE html>
<html>
   <style>
      figure {
         border: 4px #D5F5E3 solid;
         padding: 4px;
         margin: auto;
      }
   
      figcaption {
         background-color: #E8DAEF;
         color: #DE3163;
         font-style: italic;
         padding: 2px;
         text-align: center;
      }
   </style>
<body>
   <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Mahendra_Singh_Dhoni_January_2016_%28cropped%29.jpg" alt="Trulli" style="width:100%">
      <figcaption>MAHENDRASINGH DHONI</figcaption>
   </figure>
</body>
</html>

On running the above code, the output window will pop up, consisting of the image with a caption along with a CSS applied that has been displayed on the webpage.

Example

Let’s look into the another example on the usage of the <figcaption> tag.

<!DOCTYPE html>
<html>
   <style>
      figcaption {
         background-color: #E8DAEF;
         color: #DE3163;
         font-style: italic;
         padding: 2px;
         text-align: center;
      }
   </style>
<body>
   <figure>
      <img src="https://www.tutorialspoint.com/cg/images/logo.png" width="400" height="200">
      <figcaption>The Best E-Way Learning.!</figcaption>
   </figure>
</body>
</html>

When we execute the above code, it will generate an output consisting of an image uploaded to the webpage mentioned with a caption and applied CSS.

html_tags_reference.htm
Advertisements