Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain the use of figure tag in HTML5
The <figure> element in HTML5 represents self-contained content (such as images, diagrams, code listings, illustrations, etc.) along with an optional caption, that is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
Usually, the <figure> element is referenced in the main flow of a document. Even if we remove or move it to another part of the document, the figure wouldn’t affect the flow of the document. The main flow remains uninterrupted.
Use of <figure> tag
Before HTML5, there is no way to add a caption to the image semantically through HTML. If we wanted to add a caption or description, we’d have to add a paragraph with a class or something similar. Now, in HTML5, a <figure> tag was added.
The <figure> tag in HTML5 is mostly used when working with media content like images, videos, audio, etc. It also pairs up with the <figcaption> tag to provide a caption or description for our content. It provides a semantic way to organize the content within the document.
Syntax
Following is the syntax of <figure> and <figcaption> elements in HTML5 −
<figure> <img src="path or link of an image"> <figcaption>caption or description</figcaption> </figure>
In the above syntax,
The <img> tag is used to embed an image in the document.
The <figcaption> is used to specify the caption for the particular image.
Example
In the following example, we are using a <figure> element to insert an image in the document. Additionally, we are using <figcaption> element to define a caption for the image −
<!DOCTYPE html>
<html>
<head>
<title>Use of figure tag in HTML5</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="https://www.tutorialspoint.com/assets/questions/media/14304-1693310967.jpg" height="500px" width="500px" alt="This is Basilica of Bom Jesus">
<figcaption>Fig.1 - Basilica of Bom Jesus, Goa</figcaption>
</figure>
</body>
</html>
When we execute the above program, we can see an image and its caption in the <figure> container.
Example
In the example below, we are using CSS to style the <figure> and <figcaption> elements −
<!DOCTYPE html>
<html>
<head>
<title>Use of figure tag in HTML5</title>
<style>
figure {
border: 1px black solid;
padding: 1em;
margin: auto;
}
figcaption {
background-color: seagreen;
color: white;
font-style: italic;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="https://www.tutorialspoint.com/assets/questions/media/14304-1693310967.jpg" width="100%" alt="This is Basilica of Bom Jesus">
<figcaption>Fig.1 - Basilica of Bom Jesus, Goa</figcaption>
</figure>
</body>
</html>
70 Views
