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
How to set caption for an image using HTML?
HTML provides a semantic way to add captions to images using the <figure> and <figcaption> elements. Image captions enhance accessibility, provide context, and improve the overall user experience by offering descriptive text that explains or complements the visual content.
Syntax
Following is the basic syntax for creating image captions in HTML
<figure> <img src="image.jpg" alt="Description"> <figcaption>Caption text here</figcaption> </figure>
The <figure> element groups the image and caption together semantically, while <figcaption> contains the actual caption text.
Basic Image Caption
The <figure> element represents self-contained content, typically with a caption. The <figcaption> element provides a caption or legend for its parent <figure> element.
The <figcaption> can be placed either as the first or last child of the <figure> element, determining whether the caption appears above or below the image.
Example
Following example demonstrates how to add a basic caption to an image
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Caption</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Setting Caption for an Image</h2>
<figure>
<img src="/html/images/test.png" alt="Test Image" style="max-width: 300px; height: auto;">
<figcaption>Fig 1: Sample test image demonstrating image caption functionality</figcaption>
</figure>
</body>
</html>
The output displays the image with its caption positioned below
[Image displayed] Fig 1: Sample test image demonstrating image caption functionality
Caption Positioning
You can position the caption above the image by placing the <figcaption> element before the <img> element within the <figure>.
Example Caption Above Image
<!DOCTYPE html>
<html>
<head>
<title>Caption Above Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Caption Positioned Above Image</h2>
<figure style="display: inline-block; margin: 20px;">
<figcaption style="font-weight: bold; margin-bottom: 10px; color: #333;">Beautiful Landscape Photography</figcaption>
<img src="/html/images/test.png" alt="Landscape" style="max-width: 300px; height: auto; border: 2px solid #ddd;">
</figure>
</body>
</html>
The caption now appears above the image, providing context before viewing
Beautiful Landscape Photography [Image displayed with border]
Styled Image Captions
CSS can be used to enhance the visual presentation of image captions, making them more appealing and readable.
Example Styled Caption
<!DOCTYPE html>
<html>
<head>
<title>Styled Image Caption</title>
<style>
.image-container {
max-width: 400px;
margin: 20px auto;
background: #f8f9fa;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.image-container img {
width: 100%;
height: auto;
display: block;
}
.image-container figcaption {
padding: 15px;
background: #343a40;
color: white;
font-size: 14px;
text-align: center;
margin: 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5;">
<h2 style="text-align: center;">Styled Image Caption</h2>
<figure class="image-container">
<img src="/html/images/test.png" alt="Professional Photo">
<figcaption>Professional photography with custom styled caption</figcaption>
</figure>
</body>
</html>
The styled caption features a dark background with white text, padding, and rounded corners for a professional appearance.
Multiple Images with Captions
You can create a gallery-style layout with multiple images, each having their own captions.
Example Image Gallery
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery with Captions</title>
<style>
.gallery {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.gallery figure {
margin: 0;
max-width: 200px;
text-align: center;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
background: white;
}
.gallery img {
width: 100%;
height: 150px;
object-fit: cover;
}
.gallery figcaption {
margin-top: 8px;
font-size: 12px;
color: #666;
font-style: italic;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background: #f0f0f0;">
<h2 style="text-align: center;">Photo Gallery</h2>
<div class="gallery">
<figure>
<img src="/html/images/test.png" alt="Image 1">
<figcaption>Scenic Mountain View</figcaption>
</figure>
<figure>
<img src="/html/images/test.png" alt="Image 2">
<figcaption>Ocean Sunset</figcaption>
</figure>
<figure>
<img src="/html/images/test.png" alt="Image 3">
<figcaption>City Architecture</figcaption>
</figure>
</div>
</body>
</html>
This creates a responsive gallery where each image has its own descriptive caption in an organized grid layout.
Caption Accessibility
Image captions improve accessibility for users with visual impairments and provide context that enhances SEO. Always include meaningful alt attributes for images and descriptive captions that add value beyond what's visible in the image.
Example Accessible Image Caption
<!DOCTYPE html>
<html>
<head>
<title>Accessible Image Caption</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Accessible Image with Caption</h2>
<figure style="max-width: 400px; margin: 20px 0;">
<img src="/html/images/test.png"
alt="Chart showing website traffic increase of 45% over six months"
style="width: 100%; height: auto; border: 1px solid #ccc;">
<figcaption style="margin-top: 8px; font-size: 14px; color: #555; line-height: 1.4;">
Figure 1: Website traffic analytics demonstrating consistent growth from January to June 2024,
with peak performance in May showing 45% increase compared to baseline.
</figcaption>
</figure>
</body>
</html>
This example demonstrates proper use of descriptive alt text for the image content and a detailed caption providing additional context and analysis.
Conclusion
HTML's <figure> and <figcaption> elements provide a semantic and accessible way to add captions to images. This approach improves content structure, enhances user experience, and supports better SEO while maintaining clean, meaningful markup that works across all devices and assistive technologies.
15K+ Views
