HTML <figure> & <figcaption>

« Prev Next »

What is <figure>?

The <figure> tag is used to contain media content (images, diagrams, illustrations, code snippets, etc.) referenced within the main content but that can be displayed on its own.

What is <figcaption>?

The <figcaption> tag is used to provide a caption or description for the content inside the <figure> element.

html-figure

Syntax

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A view of the mountains during sunset</figcaption>
</figure>

Example

<figure>
  <img src="cat.jpg" alt="Sleeping Cat" width="300">
  <figcaption>This cat sleeps for 16 hours a day.</figcaption>
</figure>
Run ›
notepad

The <figcaption> appears below the image, describing it.

Benefits of Using <figure> & <figcaption>

  • Enhances semantic meaning of your HTML
  • Helps screen readers and SEO
  • Keeps media and description together in a logical manner
notepad
  • Use <figure> to wrap images/charts that have a descriptive caption
  • Use <figcaption> instead of plain <p> for captions
  • Combine with <img>, <video>, <audio>, or <code> for rich media
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.