W3docs

HTML <figcaption> Tag

The <figcaption> tag defines a title or a caption for the <figure> tag. Detailed description, attributes and examples of use.

The <figcaption> tag is one of the HTML5 elements. It is used to add a caption or explanations to the contents of the <figure> tag. The <figcaption> tag is included in the <figure> and is placed as the first or last child element. Placing it as the first child displays the caption above the figure content, while placing it as the last child displays it below.

You can use only one <figcaption> in the <figure> element. However, the <figure> can contain other tags too (<img> tag or <code>).

Syntax

The <figcaption> tag comes in pairs. The content is written between the opening <figcaption> and closing (</figcaption>) tags.

Example of the HTML <figcaption> tag:

HTML <figcaption> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Result

figcaption example

Attributes

The <figcaption> tag supports the Global Attributes and Event Attributes.

How to style an HTML <figcaption> Tag

By default, browsers render the <figcaption> element as a block-level element. You can customize its appearance using CSS:

figcaption {
  font-style: italic;
  color: #555;
  text-align: center;
  margin-top: 5px;
}

Practice

Practice

What is the function of the HTML <figcaption> tag?