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.

🔥 Read with Full Features on Our Website

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

Google Advertisement

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.
alt attribute helps screen readers and improves SEO.
Google Advertisement

<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:

.gallery class 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

Google Advertisement

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

How to Create a Beautiful HTML Image Gallery with <figure> and <figcaption>

Make an Image Gallery Using `<figure>` and `<figcaption>` in HTML

🧠 What are `<figure>` and `<figcaption>`?

🔧 Step-by-Step: Build the Image Gallery

✅ Step 1: Basic HTML Structure

✅ Step 2: Add Images Using `<figure>` and `<figcaption>`

✅ Step 3: Style with CSS for a Grid Layout

✅ Step 4: Wrap All Figures Inside a Gallery Container

✅ Final Code: Copy and Run This

🎉 Conclusion

Recommended Posts

How to Build and Validate Forms in Flutter – Simple Example for Beginners

Create a Simple Text Editor in Java Using Swing | Step-by-Step Guide

Simple Java To-Do App with Core Features (Add/Delete/Mark Complete)

How to Create a Splash Screen in Flutter using Timer and Navigator

Simple Flutter Login UI with TextField and Button – Step-by-Step Guide

Simple Flutter Counter App Tutorial Using setState() for Beginners

How to Create a Beautiful HTML Image Gallery with <figure> and <figcaption>

Make an Image Gallery Using <figure> and <figcaption> in HTML

🧠 What are <figure> and <figcaption>?

🔧 Step-by-Step: Build the Image Gallery

✅ Step 1: Basic HTML Structure

✅ Step 2: Add Images Using <figure> and <figcaption>

✅ Step 3: Style with CSS for a Grid Layout

✅ Step 4: Wrap All Figures Inside a Gallery Container

✅ Final Code: Copy and Run This

🎉 Conclusion

Recommended Posts

How to Build and Validate Forms in Flutter – Simple Example for Beginners

Create a Simple Text Editor in Java Using Swing | Step-by-Step Guide

Simple Java To-Do App with Core Features (Add/Delete/Mark Complete)

How to Create a Splash Screen in Flutter using Timer and Navigator

Simple Flutter Login UI with TextField and Button – Step-by-Step Guide

Simple Flutter Counter App Tutorial Using setState() for Beginners

Make an Image Gallery Using `<figure>` and `<figcaption>` in HTML

🧠 What are `<figure>` and `<figcaption>`?

✅ Step 2: Add Images Using `<figure>` and `<figcaption>`