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

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:

What is HTML Semantic	HTML Semantic
What is Semantic Elements in HTML	HTML Semantic
How to create HTML <section> Element	HTML Semantic
How to create HTML <article> Element	HTML Semantic
What is Nesting <article> in <section> or Vice Versa	HTML Semantic
How to create HTML <header> Element	HTML Semantic
How to create HTML <footer> Element	HTML Semantic
How to create HTML <nav> Element	HTML Semantic
How to create HTML <aside> Element	HTML Semantic
How to create HTML <figure> and <figcaption> Elements	HTML Semantic
Why Semantic Elements?	HTML Semantic

Single Articles

Example of HTML <figure> and <figcaption> Elements

HTML Semantic

Read Full:	HTML Semantic
Category:	Web Tutorial
Sub Category:	HTML Semantic
Uploaded by:	Admin
Views:	105

Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_figcaption