Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create self-contained content in HTML5
The
Syntax
The usage of
<figure> Image content... </figure>
The parameters used in the
The tag is used to specify the image source URL when we are including an image and it?s caption.
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
<!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
<!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>
878 Views
