How to Create a Beautiful HTML Image Gallery with <figure> and <figcaption>
Learn how to create a responsive and semantic image gallery using HTML <figure> and <figcaption> tags. Step-by-step tutorial with code examples for beginners.
Make an Image Gallery Using <figure> and <figcaption> in HTML
Creating an image gallery in HTML is a great beginner project to learn the basics of web development. In this tutorial, you’ll learn how to use two important HTML5 tags — <figure> and <figcaption> — to create a semantic, organized, and responsive image gallery.
Let’s break it down step by step.
🧠 What are <figure> and <figcaption>?
-
<figure>: This HTML tag is used to group media content, such as an image, along with its caption. -
<figcaption>: This tag is used inside the<figure>tag to provide a caption or description for the image.
These tags help improve accessibility and make your HTML code more readable and SEO-friendly.
🔧 Step-by-Step: Build the Image Gallery
✅ Step 1: Basic HTML Structure
Start with a simple HTML5 structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Image Gallery</title>
<style>
/* We'll add some CSS here later */
</style>
</head>
<body>
<h1>My Simple Image Gallery</h1>
</body>
</html>
👉 This is a basic template where we’ll build our gallery.
✅ Step 2: Add Images Using <figure> and <figcaption>
Inside the <body>, use the <figure> tag to add images with captions.
<figure>
<img src="nature1.jpg" alt="Beautiful mountain view">
<figcaption>Mountain View</figcaption>
</figure>
<figure>
<img src="nature2.jpg" alt="Sunset at the beach">
<figcaption>Sunset at Beach</figcaption>
</figure>
<figure>
<img src="nature3.jpg" alt="Forest with morning fog">
<figcaption>Foggy Forest</figcaption>
</figure>
📝 Explanation:
-
<img>tag displays the image. -
altattribute helps screen readers and improves SEO. -
<figcaption>provides a text label for the image.
✅ Step 3: Style with CSS for a Grid Layout
Let’s make it look like a real gallery by adding CSS styles.
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f4f4f4;
}
h1 {
text-align: center;
color: #333;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
figure {
width: 300px;
border: 1px solid #ddd;
padding: 10px;
background: #fff;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
figure img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 8px;
}
figcaption {
font-size: 1rem;
color: #555;
}
</style>
📝 Explanation:
-
.galleryclass uses Flexbox to arrange images side by side and wrap them on smaller screens. -
Each
<figure>has padding, border, and shadow to make it look like a card. -
Images are responsive with
max-width: 100%.
✅ Step 4: Wrap All Figures Inside a Gallery Container
Update your HTML like this:
<div class="gallery">
<figure>
<img src="nature1.jpg" alt="Beautiful mountain view">
<figcaption>Mountain View</figcaption>
</figure>
<figure>
<img src="nature2.jpg" alt="Sunset at the beach">
<figcaption>Sunset at Beach</figcaption>
</figure>
<figure>
<img src="nature3.jpg" alt="Forest with morning fog">
<figcaption>Foggy Forest</figcaption>
</figure>
</div>
🎯 Now all your image cards are inside a .gallery container that uses CSS Flexbox to form a clean layout.
✅ Final Code: Copy and Run This
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Image Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f4f4f4;
}
h1 {
text-align: center;
color: #333;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
figure {
width: 300px;
border: 1px solid #ddd;
padding: 10px;
background: #fff;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
figure img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 8px;
}
figcaption {
font-size: 1rem;
color: #555;
}
</style>
</head>
<body>
<h1>My Simple Image Gallery</h1>
<div class="gallery">
<figure>
<img src="nature1.jpg" alt="Beautiful mountain view">
<figcaption>Mountain View</figcaption>
</figure>
<figure>
<img src="nature2.jpg" alt="Sunset at the beach">
<figcaption>Sunset at Beach</figcaption>
</figure>
<figure>
<img src="nature3.jpg" alt="Forest with morning fog">
<figcaption>Foggy Forest</figcaption>
</figure>
</div>
</body>
</html>
💡 Note: Replace nature1.jpg, nature2.jpg, etc. with the actual paths to your images.
🎉 Conclusion
Using <figure> and <figcaption> is a great way to build clean, semantic image galleries in HTML. It not only makes your code organized and accessible but also looks professional when styled with CSS.
You’ve learned how to:
-
Use HTML5 semantic tags for images
-
Add captions to your images
-
Style a responsive gallery using Flexbox
TOPICS MENTIONED IN THIS ARTICLE
Thank you for visiting! Enjoy exploring our diverse collection of blogs, crafted with passion and insight to inspire and inform. Happy reading!