HTML - <figcaption> Tag

A caption for figur element 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 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

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

Attribute

HTML figcaption tag supports Global and Event attributes of HTML.

Examples og HTML figcapton Tag

Bellow examples will illustrate the usage of figcapton tag. Where, when and how to use figcapton tag and how we can manupulate figcapton element using CSS.

Adding caption using figcaption tag

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>

Styling the figcaption element

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>

Supported Browsers

Tag
figcaption	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm