HTML <figcaption> Tag

The <figcaption> tag adds a caption or description to a <figure> element. Figure captions are used to label or describe the displayed figure or image.

HTML Tag

Example

#

A <figcaption> tag.
It displays a caption below the image.

San Giorgio at Dusk, by Claude Monet
<figure>
  <img src="/img/html/sangiorgio.jpg">
  <figcaption>San Giorgio at Dusk, by Claude Monet</figcaption>
</figure>
figure = figure
figcaption = figure caption

Using <figcaption>

The <figcaption> tag adds a caption or description to the <figure> element.

Figure captions are used to summarize or describe the displayed figure or image.

This element can be placed as the first or the last element in the <figure> container.

More Examples

A <figcaption> tag that is styled to match the image colors.

Fig.1 - Van Gogh, Self Portrait
<figure>
  <img src="/img/html/vangogh-lg.jpg">
  <figcaption style="color:darkolivegreen;font-weight:bold;">
     Fig.1 - Van Gogh, Self Portrait
  </figcaption>
</figure>

Attributes for <figcaption>

The <figcaption> element has no attributes, but it does accept global attributes.
The following are occasionally used.

Attribute Value Description
id    value Provides the figcaption with a unique identifier.
class    classnames Assigns one or more classnames to the figcaption.
style    CSS-values Assigns CSS style values to the figcaption.

For additional global attributes see our global attributes list.


Did you know?

Did you know?

Changing the position of a <figcaption>

By default, a <figcaption> displays at the bottom of a <figure> element.

With CSS the position and orientation of the caption can be changed.

A <figcaption> placed on the right side of the image.

Fig.1 - Van Gogh, Self Portrait
<figure style="position:relative;color:white;
               width:300px;height:360px;
               background-color:darkred;">
  
  <img src="/img/html/vangogh-lg.jpg">
  
  <figcaption style="position:absolute; top:0; right:0;
                     writing-mode:vertical-rl;">
                     Fig.1 - Van Gogh, Self Portrait
  </figcaption>
</figure>
   

Media Tags

The <figcaption> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, these tags allow you to create powerful multi-media solutions.

Here is a list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support

Here is when <figcaption> support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides