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
How to add caption for the parent content in HTML5?
It might not come to your surprise that web designers of today are continually exploring innovative ways to enhance the user engagement and interaction on their sites, thereby creating a lasting impact on the users. An effective way to achieve this is by incorporating captions for the multimedia present on their webpages. By including captions for the images, videos, and other visual aids, the web developer can offer additional context and essential details to the users, facilitating better accessibility to the website content, particularly for users who might have difficulties comprehending the visual information.
Syntax
<figure> <img src="..."> <figcaption>...</figcaption> </figure>
When adding self-contained material to a document, such as diagrams, photographs, or code listings, the HTML <figure> tag is utilised. The figure fits with the document's flow and may be removed without affecting the flow of the document even if it is tied to the primary flow and can be utilised in any location of the content. While the <figcaption> tag can be used to add caption to the <figure> tag. We can put the <figcaption> tag as the first or the final child of <figure> tag to accomplish this.
Approach
We are going to make use of the <figure> and <figcaption> tag. Using the <figcaption> tag we are going to add the caption to the <figure> tag.
Example
The following code consists of two parts −
HTML document
CSS Stylesheet
Let us now try to understand each of these components individually. In the HTML document, I have added an image and a title caption. I have used the above mentioned figure and figcaption elements to accomplish the coupling of this. I have used 'figcaption' tag to define the caption content, while the ‘figure’ tag is used as a parent container.
Coming to CSS stylesheet, I have added styling to the image to make it look better.
<!DOCTYPE html>
<html>
<head>
<title>How to add caption for the parent content in HTML5?</title>
<style>
img{
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<h4>How to add caption for the parent content in HTML5?</h4>
<figure>
<img src=" https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg "/>
<figcaption>TutorialsPoint Logo</figcaption>
</figure>
</body>
</html>
Now I will explain the above code.
Conclusion
To conclude, the procedure of supplementing a heading for the ascendant material in HTML5 can be expounded as an uncomplicated and effortless chore. Through the application of the aforementioned technique, web developers can elevate the convenience and user acquaintance of their website, thus amplifying the comprehensive functionality and user involvement. It is of utmost importance to acknowledge that the integration of this characteristic can furnish a prompt resolution for visually impaired users and enhance the overall comprehensiveness of the website. Hence, it is incumbent on web developers to utilize this attribute and give paramount significance to the user's experience by assimilating captions into their website composition.
80 Views
