The <figure> element is used to semantically group media or content with an associated caption, while <figcaption> provides the caption. This improves accessibility and gives meaning to images, code snippets, and quotes.
Use <figure> and <figcaption> to add captions to images, code snippets, charts, or quotes.
They are especially useful in content management systems, blogs, and documentation sites where captions are needed for various types of content.
Screen readers can announce the caption as related to the content, improving accessibility.
<figure class="rounded-lg overflow-hidden shadow hover:-translate-y-1 transition-transform">
<img src="https://placehold.co/400x200?text=Chart" alt="Sales chart for Q2 2025" class="w-full h-48 object-cover block">
<figcaption class="p-3 bg-gray-100 italic">Fig.1 - Company sales increased by 25% in Q2 2025.</figcaption>
</figure>