The <figcaption>
tag adds a caption to a <figure> element.
Figure captions are used to label or describe an image.
This <figcaption>
displays a caption below the image.
<figure>
<img src="/img/html/sangiorgio.jpg">
<figcaption>San Giorgio at Dusk, by Claude Monet</figcaption>
</figure>
figure
= figurefigcaption
= figure caption
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.
A <figcaption>
tag that is styled to match the image colors.
<figure>
<img src="/img/html/vangogh-lg.jpg">
<figcaption style="color:darkolivegreen;font-weight:bold;">
Fig.1 - Van Gogh, Self Portrait
</figcaption>
</figure>
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.
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.
<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>
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 |
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 |