How to Associate a Caption with an Image in HTML5

Images can make your website more attractive. A caption can explain what you want to show on the image. That is why it is a good idea to associate a caption with the corresponding image on your website or blog. Here, I show you how to use HTML5 code to achieve this.

In HTML5, there are two new HTML elements introduced. One is <figure></figure>, and the other is <figcaption></figcaption>. With these new HTML5 elements, you can easily add a caption to one image or a group of images grouped into one figure.

How to add a figure caption to a figure in HTML5

First, you need to add the <figure></figure> element to your file.
Second, inside this <figure> element, you can add the <img src> element to include your image, use <br/> to break and then add the figure caption using <figcaption></figcaption>.

Let me give you an example. I think after taking a look of the example code, you can figure things out by yourself.

<figure>
<img src="your image link" alt="image alt text">
<br/>
<figcaption> figure caption</figcaption>
</figure>

A final thing that I want to mention here is that you can use more than one images in a figure. And the figure caption should be associated with the whole figure instead of individual images inside the figure. In other words, one figure can only have one caption, but one figure can contain multiple images.