How to create HTML <figure> and <figcaption> Elements - HTML Semantic

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

Example of HTML <figure> and <figcaption> Elements

The <img> element defines the actual image/illustration.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>Places to Visit</h2>

<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>

<figure>
  <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

</body>
</html>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Semantic
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference