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 set caption for an image using HTML?
HTML, or Hypertext Markup Language, is used to create web pages and define their structure and content. HTML has varieties of elements to create a web page. The image element is one of the essential elements of web content. Images are a powerful tool for presenting ideas and feelings on a web page and enhancing the visual appeal of a web page. Additionally, Image captions make this even more powerful because images alone are not enough to convey a message or provide context. Captions are short descriptions that provide additional information to the viewer along with the images.
Syntax
Below is a syntax for image caption −
<figcaption> Write image caption here... </figcaption>
Introduction to HTML Image Captions
Image captions are an important part of web design images because it provides additional information to the viewer. In HTML, it is a very simple and effective way to add captions to images on a web page.
HTML allows setting a caption for an image using the <figure> and <figcaption> elements. The <figure> element groups the image and its caption together, while the <figcaption> element is used to define the caption text.
Here is an example of how to add a caption to an image using HTML −
<figure> <img src="https://www.tutorialspoint.com/dip/images/16-bit.jpg" alt="16-Bit Image"> <figcaption>16-Bit RGB Image</figcaption> </figure>
In the above example, an image is added to the figure element, along with a caption using the figcaption element.
Example
Below is the full code example to set the caption for an image using HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Caption for an image using HTML</h2>
<figure>
<img src="https://www.tutorialspoint.com/dip/images/16-bit.jpg" alt="16-Bit Image">
<figcaption>Fig: 16-Bit RGB Image</figcaption>
</figure>
</body>
</html>
Creating a Responsive Caption for an Image in HTML
It is important that the added image should be responsive and adapt to different screen sizes for a better user experience. CSS allows developers to create a responsive image caption. We can create a responsive image caption by styling the <figure> and <figcaption> elements. For example to create a responsive caption for an image, we can use the below CSS code −
<style>
body {
text-align: center;
}
figure {
display: block;
margin: 0;
padding: 0;
}
figcaption {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: white;
margin-top: 10px;
background-color: #f1f;
padding: 5px;
}
</style>
In the above CSS code, we have set center alignment for the whole body, and then set the display property to block and the margin and padding properties to 0.
After that we have styled the figcaption element by setting the font family, size, and weight, as well as the color and alignment of the text. Finally, we have added a margin-top property to create some space between the image and the caption.
Example
Below is the full code example to set the responsive caption for an image.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
figure {
display: block;
margin: 0;
padding: 0;
}
figcaption {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: white;
margin-top: 10px;
background-color: #f1f;
padding: 5px;
}
</style>
</head>
<body>
<h2>Responsive Caption for an image using HTML</h2>
<figure>
<img src="https://images.all-free-download.com/images/graphicwebp/stunning_sunset_6_209866.webp" alt="A beautiful image">
<figcaption>This is a beautiful image of a sunset</figcaption>
</figure>
</body>
</html>
Conclusion
In the above article, we have discussed adding captions to images using HTML. Adding captions to images is a simple and effective way of providing additional information to the viewer. We can add the caption with an image by using the figure and fig caption elements.
9K+ Views
To Continue Learning Please Login