HTML Basics

Figure and Figure Caption

⏱ 4 min read📖 Beginner

The <figure> and <figcaption> tags let you group an image with its caption so the browser understands they belong together.

You have seen plenty of websites up to now.

You must have noticed that images on pages usually have a small line of text right underneath them.

👀 Here is what you see on the page

Nadia

Nadia (born 1988) is an American software engineer, web developer, educator, and content creator. With over 10 years of professional experience in web development, she has become one of the most influential voices in tech education.

See that text right under the photo? That small line is called a caption. It tells you what you are looking at without you having to guess.

And you can add one to your images too.

The Simple Way

The quickest way to add a caption is to just drop a <p> tag right after your image.

It works fine. The text shows up under the image and it looks like a caption.

But there is a problem. The browser has no idea that paragraph belongs to the image. To the browser they are just two separate things sitting next to each other. An image and then some random text.

HTML actually has special tags built exactly for this. Let us look at those instead.

The Better Way — figure and figcaption

HTML gives us two tags that work together: <figure> and <figcaption>.

Think of <figure> as a little box that groups the image and its caption together as one thing. And <figcaption> is the caption that sits inside that box.

Let us see it in action.

The image and the caption are now properly tied together. The browser understands they belong to each other. Search engines understand it. Screen readers understand it.

It is not just about how it looks. It is about what it means.

Why Does This Matter

You might wonder why bother with <figure> when the image already shows up fine on its own.

The reason is that <figure> adds meaning, not just presentation.

With <img> alone the browser only knows it is an image. If you put a <p> after it the browser just sees some text. It has no idea the two are connected.

With <figure> and <figcaption> everything changes. The browser, search engines, and screen readers all understand that the text is the caption for that specific image. They belong together and the code makes that clear.

💡

Using <figure> and <figcaption> is not strictly required but it is the right way to do it. It makes your code more meaningful and accessible.

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.