HTML Figure & Figcaption | Image Caption Tutorial

HTML Figure and Figcaption

HTML <figure> and <figcaption> tags are used to add images, diagrams, charts, or any media with a proper caption. The <figure> tag groups the content, while <figcaption> provides a description or title for that content. This improves semantic structure, accessibility, and SEO of web pages.

2 views

5 min read

What are Figure & Figcaption?

These two tags work together to add a caption to an image, chart, or code block.

Basic example:

1<figure>
2    <img src="mountain.jpg" alt="Beautiful mountain">
3    <figcaption>Figure 1: Himalayan mountain range at sunset</figcaption>
4</figure>

How it works:

<figure> wraps the content
<figcaption> is the caption text (usually below the image)

Chart with caption:

1<figure>
2    <img src="sales-chart.png" alt="Sales growth chart">
3    <figcaption>Figure 2: Monthly sales growth for 2025 (in thousands)</figcaption>
4</figure>

Code block with caption:

1<figure>
2    <pre><code>
3        &lt;h1&gt;Hello World&lt;/h1&gt;
4        &lt;p&gt;This is my first website&lt;/p&gt;
5    </code></pre>
6    <figcaption>Code example 1: Basic HTML structure</figcaption>
7</figure>

Multiple images, one caption:

1<figure>
2    <img src="cat1.jpg" alt="Cat 1">
3    <img src="cat2.jpg" alt="Cat 2">
4    <img src="cat3.jpg" alt="Cat 3">
5    <figcaption>Figure 3: My three cats playing together</figcaption>
6</figure>

Why use them?

Groups image and caption together (they stay connected)
Screen readers read the caption with the image
Better SEO (search engines understand the relationship)
Can be styled easily with CSS