• Post category:HTML

How to Create Figure Caption HTML | Advanced Guide

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:

figure caption html

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.
READ ALSO  How to Use Table Border Collapse in HTML

Leave a Reply