<figcaption>

Definition

The HTML <figcaption> element is used to provide a caption or a description for a media element, such as an image, video, or audio file, within a <figure> element. The <figcaption> element should be placed immediately after the <img>, <video>, or <audio> element within the <figure> element.

Examples

Here's an example of how the <figcaption> element is used:

<figure>
  <img src="example.jpg" alt="Example image">
  <figcaption>This is an example image.</figcaption>
</figure>

In this example, the <figcaption> element provides a caption for the <img> element within the <figure> element. When the image is displayed, the caption will be displayed below it.

Attributes

This element only includes the global attributes.

Best Practices

• Use <figcaption> to provide a caption or description for a media element within a <figure> element. The <figure> element should contain the media element, such as an <img>, <video>, or <audio> element, and the <figcaption> element should be placed immediately after the media element.
• Use descriptive text in the <figcaption> element that accurately describes the content of the media element. The text should be concise and to-the-point, and should provide additional information about the media element that may not be immediately obvious.
• Use CSS styles to visually distinguish the <figcaption> element from the rest of the content on the page. This helps to make the caption stand out and ensures that users can easily identify it as a separate element from the media element.
• Ensure that the <figcaption> element is accessible to users who are using assistive technologies, such as screen readers. This means providing descriptive text that accurately describes the content of the <figcaption> element, and using proper HTML markup, such as the alt attribute on images.
• Avoid using the <figcaption> element for decorative purposes, as it is intended to provide meaningful content that enhances the user's understanding of the media element. If you don't have any meaningful content to add, it's better to leave the <figcaption> element out altogether.

Accessibility Considerations

• Use descriptive text in the <figcaption> element that accurately describes the content of the media element. This helps users who cannot see the media element to understand what it is and what it represents.
• Use proper HTML markup, such as the alt attribute on images, to provide alternative text that describes the media element. This helps users who cannot see the media element, such as those who are blind or have low vision, to understand the content.
• Use semantic HTML markup to ensure that the <figcaption> element is properly labeled and associated with the media element it describes. This helps assistive technologies, such as screen readers, to correctly identify and announce the relationship between the media element and its caption.
• Use CSS to visually distinguish the <figcaption> element from the media element, such as by using a different font style, size, or color. This helps users who have difficulty seeing or distinguishing between different types of content to identify the caption.
• Test the accessibility of your content using assistive technologies, such as screen readers or keyboard-only navigation, to ensure that all users can access and interact with the content. Make any necessary adjustments to improve accessibility based on your testing results.

Browser Compatibility