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>
191 Views
