HTML5 figure Tag - Studyopedia

10 Jul HTML5 figure Tag

Posted at 14:27h in HTML5 by Studyopedia Editorial Staff 0 Comments

Use the HTML5 figure tag if you want to add images, diagrams and other self-contained content on your website. Add a caption too by adding the HTML5 <figcaption> tag under the <figure> tag.

<!DOCTYPE html>
<html>
<head>
<title>Understanding HTML5 Figure Tag</title>
</head>
<body>
<figure>
  <img
  src="https://studyopedia.com/wp-content/uploads/2017/02/studyopedia_logo.png"
  alt="Studyopedia Logo">	
  <figcaption>Figure- Studyopedia Logo</figcaption>
</figure>
</body>
<html>

Here’s the output, with caption Figure- Studyopedia Logo, added using the figcaption tag,

HTML5 figure tag

We have added a logo under the src attribute of img tag under the figure tag. Additionally, we added figcaption tag also to provide caption to the image we added.

We also added a title to the web page, which would be visible on the page’s tab as well as web browsers tab.