Summary  
This chapter explains how to use the HTML `<figure>` element to group media with the `<figcaption>` element to provide clear, semantic descriptions for images or diagrams.  

General domain of usage  
Web content authoring

The `<figure>` element allows you to group media, such as images or diagrams, with an accompanying caption. The `<figcaption>` element provides a clear description or explanation of the visual content. Using these elements together helps users quickly understand the purpose of an image, especially when it provides additional context, like a chart, diagram, or photograph that needs explanation.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkZpZ3VyZSBhbmQgRmlnY2FwdGlvbiBFeGFtcGxlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZmlndXJlPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzMyMzlmZjljLWZlNTUtNDJlMi04ZTNkLWRmMmE4NWZkNDEzOC9zZWN0aW9uLTIvbW91bnRhaW4ucG5nIgogICAgICAgIGFsdD0iQSBzbm93LWNhcHBlZCBtb3VudGFpbiB1bmRlciBhIGJsdWUgc2t5IgogICAgICAvPgogICAgICA8ZmlnY2FwdGlvbj4KICAgICAgICBUaGUgbWFqZXN0aWMgcGVhayBvZiBNb3VudCBSYWluaWVyIGF0IHN1bnJpc2UsIFdhc2hpbmd0b24gU3RhdGUuCiAgICAgIDwvZmlnY2FwdGlvbj4KICAgIDwvZmlndXJlPgogIDwvYm9keT4KPC9odG1sPg==

Always use `<figcaption>` for images that need explanation. This approach benefits everyone, including users who rely on screen readers for accessible content.

Note

When should you use the `<figcaption>` element in HTML?

Learn how to create meaningful, accessible, and visually rich web content using HTML. Combine text, images, audio, and video to craft pages that are structured, engaging, and optimized for search engines. Gain practical skills in semantic markup, media integration, and navigation design to build web pages that look great and perform well.

Build a strong foundation for creating clear and readable web content. Use semantic elements to structure text, emphasize key information, and organize content with lists that enhance both meaning and accessibility.

Enhance web pages with images that are both visually engaging and accessible. Embed and optimize visuals effectively, add descriptive alt text, and use figures with captions to give context and meaning to visual content.

Combine multimedia and navigation elements to create engaging, discoverable, and user-friendly websites. Add audio and video content, build intuitive navigation menus, and include meta information that improves SEO and accessibility.

Figures and Captions