Horje
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:

Example of HTML <figure> and <figcaption> Elements





Related Articles
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> ElementsHTML Semantic

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


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