Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Self-Contained Content in HTML5
The <figure> element in HTML5 is used to display self-contained content (images, videos, etc). This can be attached to the main program, and can be used at any place within the document without impacting the flow of document. Additionally, if we remove the <figure> tag, it won't affect the structure of the document.
Syntax
The usage of <figure> tag in HTML is shown below −
<figure> Image content... </figure>
The parameters used in the <figure> caption are img, src and figcaption.
The <img> tag is used to specify the image source URL when we are including an image and it's caption. <figure> and <figcaption> elements are used to group the image and provide a caption to it. The browsers display's the <figure> element by using default CSS settings -
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Now, let us see some examples, which demonstrate the usage of self-contained content element in HTML.
Example
In the following example, we are using the <figure> tag to create self-contained content -
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<h1>Usage of Self-Contained Content Element</h1>
<figure>
<img src="https://www.tutorialspoint.com/images/forex_trading_icon.svg" alt="Trulli" height="150" width="150">
<figcaption>Fig.1 - flowers,India</figcaption>
</figure>
</body>
</html>
Example
Following is another example which shows usage of <figure> tag using CSS −
<!DOCTYPE html>
<html>
<head>
<style>
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<p>A figure element is displayed like this:</p>
<figure>
<img src="https://www.tutorialspoint.com/images/statistics_icon.svg" alt="The Pulpit Rock" width="150" height="150">
</figure>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Example
Let us see another example −
<!DOCTYPE html>
<html>
<head>
<title>HTML figure Tag</title>
</head>
<body>
<h2>Tutorialspoint Coding Ground</h2>
<figure>
<img src="https://www.tutorialspoint.com/images/cbse-class-6-maths-notes_icon.svg" />
</figure>
</body>
</html>
642 Views
