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:
- In the above code, we created <figure> tag.
- Then inside the <figure> tag, we have <img> tag for inserting an image and <figcaption> tag for displaying caption text.
- 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.
- Inside the <figcaption> tag we provide the caption or description text.
- See the above output, caption text will be successfully displayed below the image.