HTML - <figcaption> Tag

Quiz

A caption for figure elements can be added using the <figcaption> element. This optional tag may appear before or after the content within the <figure> tag.

Although the <figure> element can include various other elements like <img> or <code>, only one <figcaption> element can be nested within a <figure> tag. The <figcaption> element is used with the <figure> element and can be positioned either as the first or last child of the <figure> element.

Syntax

Following is the syntax of <figcaption> tag −

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

Attributes

The HTML <figcaption> tag supports both Global and Event attributes.

Example: Adding a Caption

The following example demonstrates how to use the <figcaption> tag to add a caption to an image. The HTML code displays an image with a 50% width and a caption "Tutorialspoint Logo" below it.

<!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>

Example: Styling the <figcaption> Tag

Considering another scenario where we use the <figcaption> tag with CSS, this HTML code displays an image of Mahendra Singh Dhoni with a styled border and a centered caption below it.

<!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="/html/images/test_image.jpg" alt="Trulli" style="width:100%">
      <figcaption>Evening Dawn</figcaption>
   </figure>   
</body>
</html>

Supported Browsers

Tag
figcaption	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page