Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <figcaption> Tag

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

Figure captions are used to label or describe an image.

Example

#

This <figcaption> 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 description to a <figure>.

Figure captions summarize or describe the figure or image.

This element can be placed as the first or 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, they 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


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides