Figure Caption HTML

This article will look at the newly introduced figure caption tag in HTML 5. The descriptive text below an image is called a caption. You will have seen many examples of caption text in newspapers. Before HTML 5 we used to create Captions using <p> tags, now we can easily make them using <figure> and <figcaption> tags.

How to use figure & figure caption tag

<figure>
<img src="nature.jpg" width="80%" height="250px">
<figcaption style="text-align: center;">The Nature is Beauty</figcaption>
</figure>

Output:

Steps:

1. In the above code, we created <figure> tag.
2. Then inside the <figure> tag, we have <img> tag for inserting an image and <figcaption> tag for displaying caption text.
3. We use the “SRC” attribute in <img> tag to give an image file location. Then set the width and height attributes as in the above code.
4. Inside the <figcaption> tag we provide the caption or description text.
5. See the above output, caption text will be successfully displayed below the image.