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
Include a caption for a <figure> element in HTML5
The <figure> element in HTML5 is used to add self-contained information like diagrams, photographs or code present in a document.
Generally, the figure element attached to the main program, we can use at any place in the document, and we can also remove the <figure> tag without impacting the flow of document.
The <figcaption> element is used to add caption for the tag element <figure>. It is an optional tag placed before or after the tag's content.
The element <figure> is used to diagrams, markup photos etc.,.
The element <figcaption> is used to give caption for <figure> element.
The element <figcaption> can be the first or last child of the element <figure>
Syntax
Following is the syntax of <figure> element −
<figure> <img src="...."> <figcaption>.......</figcaption> </figure>
The parameters used in the <figure> caption are img src and figcaption. To include image source, we use img src tag; and figcaption is used to specify the image's caption. 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;
}
Example
Following is the example to Include a caption for a <figure> element in HTML5 −
<!DOCTYPE html>
<html>
<body>
<h1>Usage of figure and figcaption element</h1>
<figure>
<img src="https://www.tutorialspoint.com/images/cbse_syllabus_icon.svg" alt="Rose" width="150" height="150">
<figcaption>Fig.1 - Rose, Hyderabad, India.</figcaption>
</figure>
</body>
</html>
Example
Following is another example -
<!DOCTYPE html>
<html>
<head>
<title>TutorialsPoint</title>
</head>
<body>
<figure>
<img src="https://www.tutorialspoint.com/images/computer_concepts_icon.svg" width="150" height="100">
<figcaption> TutorialsPoint | Simply Easy Learning </figcaption>
</figure>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML figcaption Tag</title>
</head>
<body>
<figure>
<img src="https://www.tutorialspoint.com/images/library-sub-banner1.png" />
<figcaption>Tutorials Point Library of Tutorials</figcaption>
</figure>
</body>
</html>
180 Views
