HTML Tutorial

HTML Tag: <figcaption>

Usage of <figcaption>

The <figcaption> tag provides a caption or description for a <figure> element. It usually appears below the <figure> content and is used to explain or provide additional context.

Attributes of <figcaption>

<figcaption> has no specific attributes.

Examples with <figcaption>

Example 1:

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A panoramic view of the Swiss Alps</figcaption>
</figure>

Example 2:

<figure>
  <video src="video.mp4" controls>
    <track src="captions.vtt" kind="captions">
  </video>
  <figcaption>A video showcasing the latest technology</figcaption>
</figure>

Exploring the <figcaption> Tag - HTML Example

<!DOCTYPE html>
<html>
<body>

<figure>
  <img src="cat.jpg" alt="A cute cat">
  <figcaption>This is a picture of my cat, Mittens.</figcaption>
</figure>

</body>
</html>

Output:

[An Cat Image]

Caption: This is a picture of my cat, Mittens.

Accessibility and Ease of Use

The <figcaption> tag is crucial for accessibility, as it provides context and explanation for non-visual users (e.g., screen readers).

For improved user experience, ensure that the caption accurately describes the content of the <figure> and is concise and easy to understand.