HTML <figcaption> Tag
The <figcaption> tag defines a caption or legend for a <figure> element. It's used to provide a descriptive text explaining the content of the figure, whether it’s an image, a diagram, a code snippet, or any other type of embedded content. The <figcaption> tag enhances the semantic structure of HTML documents, making them more accessible and understandable.
Syntax
<figcaption>
Caption text
</figcaption>
Attributes
The <figcaption> tag does not support any specific attributes. It inherits global attributes applicable to all HTML elements.
| Attribute | Value | Description |
|---|---|---|
| class | classname | Specifies one or more class names for an element. |
| id | idname | Specifies a unique id for an element. |
| style | CSS properties | Specifies an inline CSS style for an element. |
| title | text | Specifies extra information about an element. |
| accesskey | character | Specifies a keyboard shortcut to activate/focus on the element. |
| hidden | hidden | Specifies that the element is not yet, or is no longer, relevant. |
| lang | language_code | Specifies the language of the element's content. |
| tabindex | number | Specifies the tabbing order of the element. |
| dir | ltr/rtl | Specifies the text direction for the element. |
| contenteditable | true/false | Specifies if the content of the element is editable. |
| data-* | value | Used to store custom data private to the page or application. |
Example
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A stunning landscape with mountains and a clear blue sky.</figcaption>
</figure>
More Examples
Example 1: With a diagram
<figure>
<img src="diagram.png" alt="Flowchart of a process">
<figcaption>Flowchart depicting the steps in a specific process.</figcaption>
</figure>
Example 2: Positioning the caption above the figure
While the default is to display the <figcaption> below the figure content, you can use CSS to position it differently.
<figure class="caption-top">
<figcaption>A graph showing the growth of website traffic.</figcaption>
<img src="graph.png" alt="Website traffic graph">
</figure>
.caption-top figcaption {
text-align: center;
}
.caption-top {
display:flex;
flex-direction: column;
}
Example 3: Using with different media type
<figure>
<video src="video.mp4" controls width="320" height="240">Your browser does not support the video tag.</video>
<figcaption>Short video showcasing a product demo.</figcaption>
</figure>
Example 4: Using with code example
<figure>
<pre>
<code>
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet("User");
</code>
</pre>
<figcaption>JavaScript function to greet a user.</figcaption>
</figure>
Example 5: Adding styling to caption
<figure>
<img src="city-night.jpg" alt="City at night" width="400">
<figcaption style="font-style: italic; color: gray; font-size:0.9em;">A vibrant city at night</figcaption>
</figure>
Browser Support
The <figcaption> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- The
<figcaption>element should be the first or last child of its parent<figure>element. - Using
<figcaption>improves accessibility, especially for screen readers. It provides context to the content within the<figure>. - It's semantically more correct to use
<figcaption>within a<figure>for captions rather than generic elements like<div>or<p>. - While it's possible to position the caption using CSS, consider the logical and semantic flow of content when designing your layout.
- The
<figcaption>element is not meant for arbitrary text, it specifically describes the figure it belongs to. - Use short and descriptive text for captions that provides the right context of the figure.
