Figure and Figcaption Elements in HTML

Here’s something most beginners don’t think about: dropping an <img> tag on a page gets the image to show up, sure. But it tells the browser, search engines, and screen readers absolutely nothing about what that image means in context. It’s just a visual asset floating in space.

That’s where the figure tag in HTML steps in. It’s one of those elements that looks simple on the surface, but once you understand what it actually does semantically, you’ll never go back to wrapping images in random <div>s again.

In this tutorial, we’re going to cover the <figure> element, the <figcaption> element, how they work together, why they matter for SEO and accessibility, and when you should (and shouldn’t) use them. Let’s get into it.

01What Is the Figure Tag in HTML?

The figure tag in HTML is a semantic element that groups self-contained content, most commonly an image, along with an optional caption. It was introduced in HTML5 as part of the push toward more meaningful, structured markup.

Before HTML5, developers would wrap images in <div> tags and add a <p> or <span> below for captions. It worked visually, but it meant nothing structurally. A browser or search engine had no idea that the text below the image was actually describing it.

The <figure> element fixes that. It creates a semantic container that says: “Everything inside me belongs together as a single, self-contained unit.”

Here’s what the HTML spec itself says about it: the <figure> element represents content that is self-contained and can be moved away from the main flow of the document without affecting the document’s meaning. Think of it like a figure in a textbook, it’s referenced by the surrounding content, but it could technically exist on its own page and still make sense.

If you’ve been reading through this series, you may have already seen <figure> briefly mentioned in our guide on semantic HTML. This article takes a full, deep dive into it.

02Before figure Existed, This Is What We Did

Let me show you the old approach first, so you can see exactly why <figure> was needed.

<!-- The old way (still works, but not semantic) -->
<div class="image-wrapper">
  <img src="sunset.jpg" alt="Golden hour sunset over the mountains">
  <p class="caption">Golden hour over the Rocky Mountains, Colorado</p>
</div>

This looks fine on screen. But think about what a search engine or screen reader sees: a <div> containing an image and a paragraph. There’s no semantic connection between the image and that paragraph. The browser can’t tell if that paragraph is a caption for the image, a footnote, a heading, or something else entirely.

That’s the gap the figure tag in HTML fills.

03The Basic Syntax of the Figure Tag in HTML

The syntax is clean and straightforward. Here’s the most basic version:

<figure>
  <img src="sunset.jpg" alt="Golden hour sunset over the mountains">
</figure>

Yes, you can use <figure> without a caption. Sometimes you just want the semantic wrapper without adding visible text. That’s perfectly valid.

But the real power comes when you add the <figcaption> tag:

<figure>
  <img src="sunset.jpg" alt="Golden hour sunset over the mountains">
  <figcaption>Golden hour over the Rocky Mountains, Colorado</figcaption>
</figure>

Now everything makes sense. The browser, search engines, and assistive technologies all know that this text is the caption for this specific image. They’re linked.

<div>
  <img>
  <p>Caption</p>
</div>

<figure>
  <img>
  <figcaption>
    Caption
  </figcaption>
</figure>

04The Figcaption Tag in HTML: Giving Images Context

The figcaption tag in HTML is the element that holds your caption text. It only makes sense inside a <figure> element, and there should only be one <figcaption> per <figure>.

A lot of beginners ask: what’s the difference between alt text and <figcaption>? Great question, because they serve different purposes.

• The alt attribute describes what the image is, for users who can’t see it (screen readers, failed image loads).
• The <figcaption> adds context or commentary that’s visible to everyone, it enriches the content for all users.

Think of it this way: alt text says “a dog sitting on a wooden porch.” A figcaption might say “Max, our rescue golden retriever, on his first day home.” Both are about the same image, but they serve completely different purposes. If you want a deeper look at alt text, check out our full guide on alt text for images in HTML.

Where Does figcaption Go? Top or Bottom?

The figcaption tag in HTML can go either at the top or the bottom of the <figure> element. HTML allows both. Most of the time, captions appear below the image, which is the convention most readers expect.

<!-- Caption below the image (most common) -->
<figure>
  <img src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
       alt="DaniyalDev website social share preview"
       width="800" height="400">
  <figcaption>The DaniyalDev homepage: where beginners start learning web development.</figcaption>
</figure>

<!-- Caption above the image (less common, but valid) -->
<figure>
  <figcaption>The DaniyalDev homepage: where beginners start learning web development.</figcaption>
  <img src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
       alt="DaniyalDev website social share preview"
       width="800" height="400">
</figure>

Caption at the top is sometimes used in newspapers or academic papers. For most web content, stick with the caption at the bottom. It’s what users naturally expect.

Live Preview: How It Renders in the Browser

Caption Below
Caption Above

figcaption
The DaniyalDev homepage: where beginners start their web development journey.

figcaption
The DaniyalDev homepage: where beginners start their web development journey.

05Writing a Good Image Caption in HTML

Adding a image caption in HTML that actually helps users is a small skill worth getting right. A lot of captions out there are either redundant or useless.

Here are the key rules:

Don’t repeat the alt text. The alt text and figcaption should complement each other, not duplicate the same information. If your alt text says “A brown dog sitting on a porch,” your caption shouldn’t say “A dog sitting on a porch.” Give users something more.

Add context that the image can’t show. Captions are great for dates, locations, names, sources, or notes that help the image make more sense.

Keep it concise. One to two sentences is usually enough. Captions aren’t the place for paragraphs.

Here’s a side-by-side example:

<!-- Weak caption: repeats what the image already shows -->
<figure>
  <img src="mountain.jpg" alt="Snow-capped mountain peak at dawn">
  <figcaption>A mountain with snow on it.</figcaption>
</figure>

<!-- Strong caption: adds information the image alone can't tell you -->
<figure>
  <img src="mountain.jpg" alt="Snow-capped mountain peak at dawn">
  <figcaption>K2, the world's second tallest mountain, photographed from base camp during the 2024 expedition.</figcaption>
</figure>

The second one gives readers something they couldn’t figure out just by looking at the photo. That’s what a good image caption in HTML should do.

06The Figure Tag in HTML Is Not Just for Images

Here’s something that surprises a lot of developers: the figure tag in HTML isn’t limited to images. That’s a common assumption, but it’s wrong.

According to the HTML spec, <figure> is for any self-contained content that is referenced from the main content. That includes:

Code Blocks Inside Figure

This one is actually really useful for documentation and technical writing:

<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>A simple JavaScript greeting function using template literals.</figcaption>
</figure>

Blockquotes as Figures

When a pull quote or testimonial is referenced from the main body text, wrapping it in <figure> is completely appropriate:

<figure>
  <blockquote>
    <p>The best way to learn web development is by building things.</p>
  </blockquote>
  <figcaption>
    Advice from a senior developer at Google I/O 2024
  </figcaption>
</figure>

Tables and Diagrams

A data table or chart referenced from surrounding text? Perfect use case:

<figure>
  <table>
    <thead>
      <tr>
        <th>Browser</th>
        <th>Market Share</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Chrome</td><td>65%</td></tr>
      <tr><td>Safari</td><td>19%</td></tr>
      <tr><td>Firefox</td><td>4%</td></tr>
    </tbody>
  </table>
  <figcaption>Global browser market share as of Q4 2024 (Source: StatCounter).</figcaption>
</figure>

Video and Audio

Embedded media works great inside <figure> too:

<figure>
  <video controls width="640">
    <source src="tutorial.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
  </video>
  <figcaption>Tutorial: Building your first responsive layout with CSS Grid.</figcaption>
</figure>

07What “Self-Contained” Actually Means

The spec uses the word “self-contained” for <figure> and it’s worth understanding what that really means in practice.

Self-contained means: if you pulled the <figure> out of the page and placed it somewhere else, it would still make complete sense on its own. The content inside it doesn’t depend on the surrounding paragraphs to be understood.

Think of how physical textbooks work. A diagram or chart often has a caption, a figure number, and sometimes a source. It can sit on any page because it’s a standalone unit. The rest of the text might say “see Figure 3” but the figure itself is complete.

Here’s a practical test you can apply before using <figure>: Ask yourself, “If I removed this from the page, would the main content still make sense? And would this content still make sense on its own?” If the answer to both is yes, then <figure> is appropriate.

If the image is purely decorative or deeply embedded in the flow of the text (like a background texture or a bullet point icon), then <figure> is probably not the right choice for it.

08Figure Tag in HTML and SEO: The Real Story

Let’s talk about what actually matters from an SEO perspective, because there’s a lot of vague information floating around about this.

The figure tag in HTML on its own doesn’t hand you a direct SEO ranking boost. Google isn’t checking if you used <figure> and rewarding you with extra points. But that’s not the whole picture.

Here’s what actually happens:

1. Search engines can read your figcaption as contextual content. The text inside <figcaption> is crawlable, indexable text. If your caption includes relevant keywords and context, that contributes to the overall topical relevance of the page. It’s not magic, but it’s real content that gets read.

2. Structured, semantic markup helps Google understand your content better. When Google parses a page and sees a <figure> containing an <img> with proper alt text and a <figcaption>, it has a much clearer picture of what that image represents and why it’s there. Compare that to an image sitting in a generic <div> with no caption, Google has much less to work with.

3. Google Images can use figcaption text. When your image appears in Google Images search results, the caption text can be used as additional context for the image. This can improve the accuracy of how your image is matched to search queries.

4. Better structure means better user experience, and user experience is something Google definitely cares about. Pages that are well-organized with semantic HTML tend to perform better over time.

The bottom line: using <figure> and <figcaption> properly is one part of a larger semantic HTML strategy. On its own, it won’t transform your rankings. As part of a well-structured page, it adds up. We covered the broader picture in our deep dive on semantic HTML and SEO.

09Accessibility: How Screen Readers Handle Figure and Figcaption

This is where the <figure> and <figcaption> combination really shines, and where skipping it genuinely hurts real users.

Screen readers like NVDA, JAWS, and VoiceOver are capable of recognizing the <figure> element. When they encounter one, they can announce it as a “figure” group, and when there’s a <figcaption> present, they can announce that as the “caption” or “figure label” for the group.

This creates a much richer experience for users who rely on assistive technology. Instead of just hearing an image description followed by an unconnected sentence of text, they hear the image description and then understand that the following text is specifically the caption for that image.

Here’s an example that shows the difference clearly:

<!-- Screen reader experience without figure/figcaption -->
<div>
  <img src="team.jpg" alt="The development team at the annual conference">
  <p>Left to right: Alex, Maria, Chen, and Priya at DevConf 2024.</p>
</div>

<!-- What the screen reader hears: 
  "Image: The development team at the annual conference. 
   Left to right: Alex, Maria, Chen, and Priya at DevConf 2024."
   (No connection between the two)
-->

<!-- Screen reader experience with figure/figcaption -->
<figure>
  <img src="team.jpg" alt="The development team at the annual conference">
  <figcaption>Left to right: Alex, Maria, Chen, and Priya at DevConf 2024.</figcaption>
</figure>

<!-- What the screen reader hears:
  "Figure. Image: The development team at the annual conference. 
   Caption: Left to right: Alex, Maria, Chen, and Priya at DevConf 2024."
   (Clear, structured relationship)
-->

The second version gives visually impaired users the same complete, structured information that sighted users get by looking at the image and its caption together. That’s what accessibility is about.

You already learned the importance of alt text in our alt text for images guide. The figcaption is the next layer on top of that, adding even more context for assistive tools.

10Styling Figure and Figcaption with CSS

By default, browsers don’t add much styling to <figure> and <figcaption>. The <figure> element does get a small margin on some browsers (usually 40px on the sides), which you’ll often want to reset. Other than that, styling is completely up to you.

Here’s a clean, practical example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Figure Styling Example</title>
  <style>
    figure {
      margin: 0;
      max-width: 600px;
    }

    figure img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
    }

    figcaption {
      margin-top: 8px;
      font-size: 0.875rem;
      color: #64748b;
      font-style: italic;
      text-align: center;
    }
  </style>
</head>
<body>
  <figure>
    <img 
      src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
      alt="DaniyalDev learning platform"
      width="800"
      height="400">
    <figcaption>
      DaniyalDev: a free web development tutorial platform for beginners.
    </figcaption>
  </figure>
</body>
</html>

One thing to always do: reset the margin on <figure>. Browsers add a default margin that can cause unexpected spacing issues in your layouts. Adding margin: 0 gives you a clean starting point and you control the spacing yourself.

Also note the display: block on the image inside figure. Images are inline by default, which causes a small gap at the bottom. Setting display: block removes that gap. We go into more detail on this in our article on mastering images in HTML5.

Interactive: CSS Styling Styles for figure + figcaption

Minimal
Card
Caption Bar

11Multiple Images in a Single Figure

Sometimes you want to group several related images under one caption. That’s completely valid. You can put multiple images inside a single <figure> element.

<!-- Before and After comparison -->
<figure>
  <img 
    src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
    alt="Website design before the redesign" 
    width="400" height="200">
  <img 
    src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
    alt="Website design after the redesign" 
    width="400" height="200">
  <figcaption>
    Left: the original design from 2022. Right: the updated layout from 2024.
  </figcaption>
</figure>

This works because the caption applies to the entire group, not just one image. Useful for before/after comparisons, step-by-step sequences, or photo galleries with a shared description.

12Common Mistakes with the Figure Tag in HTML

Let’s cover the mistakes worth knowing about so you avoid them from the start.

13A Complete Real-World Example

Let’s pull everything together in a realistic example: a blog article about web development history that uses multiple <figure> elements properly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Brief History of the Web</title>
  <style>
    body {
      max-width: 720px;
      margin: 0 auto;
      padding: 2rem 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.7;
      color: #1e293b;
    }

    /* Reset the default figure margin */
    figure {
      margin: 2rem 0;
    }

    figure img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 10px;
    }

    figcaption {
      margin-top: 0.6rem;
      font-size: 0.85rem;
      color: #64748b;
      font-style: italic;
      text-align: center;
    }

    /* Code figure with a special border */
    figure.code-example {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
    }

    figure.code-example pre {
      margin: 0;
      padding: 1.25rem;
      font-size: 0.875rem;
      overflow-x: auto;
    }

    figure.code-example figcaption {
      background: #e2e8f0;
      padding: 0.5rem 1.25rem;
      text-align: left;
      font-style: normal;
      font-size: 0.78rem;
      color: #475569;
      margin-top: 0;
    }
  </style>
</head>
<body>

  <article>
    <h1>A Brief History of the Web</h1>

    <p>
      The World Wide Web was invented by Tim Berners-Lee in 1989 while 
      working at CERN. What started as a document-sharing system has grown 
      into the global platform we use today.
    </p>

    <!-- Image figure with caption -->
    <figure>
      <img 
        src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png" 
        alt="A screenshot of the first-ever website created by Tim Berners-Lee"
        width="800"
        height="400">
      <figcaption>
        The first website, info.cern.ch, went live in August 1991 and is 
        still accessible online today.
      </figcaption>
    </figure>

    <p>
      The first HTML document was remarkably simple. It had no CSS, 
      no JavaScript, and barely any formatting. Just headings, 
      paragraphs, and links.
    </p>

    <!-- Code figure with caption -->
    <figure class="code-example">
      <pre><code><!DOCTYPE html>
<html>
<head><title>My First Page</title></head>
<body>
  <h1>Hello, World Wide Web</h1>
  <p>This is the beginning.</p>
</body>
</html></code></pre>
      <figcaption>
        Example of a simple early HTML document, similar to what the first 
        web pages looked like in 1991.
      </figcaption>
    </figure>

    <p>
      What's remarkable is how the core structure of an HTML document 
      has barely changed in over three decades. The foundation Berners-Lee 
      built has proven incredibly durable.
    </p>

    <!-- Blockquote figure -->
    <figure>
      <blockquote>
        <p>
          "The Web is more a social creation than a technical one. 
           I designed it for a social effect, to help people work 
           together, and not as a technical toy."
        </p>
      </blockquote>
      <figcaption>
        Tim Berners-Lee, from his book "Weaving the Web" (1999)
      </figcaption>
    </figure>

  </article>

</body>
</html>

Notice a few things about this example. Each <figure> serves a different type of content (image, code, blockquote) but uses the same pattern. The CSS is minimal and each caption adds information that isn’t already visible from the content itself. That’s the standard to aim for.

14Quick Reference: Figure Tag in HTML Cheat Sheet

15When NOT to Use Figure

It’s worth spelling out some cases where <figure> is the wrong choice, just to make sure you’re reaching for it at the right moments:

Profile photos and avatars: A user’s profile picture next to their name isn’t self-contained referenced content. It’s a UI element. Use plain <img>.

Site logos: Your header logo isn’t a figure. It’s part of the navigation or branding. Wrap it in a link, not a figure.

Inline icons: Small icons that are purely visual helpers (like arrows, checkmarks, or social media icons) don’t need figure wrappers.

Background and decorative images: If the image adds no real content value and would be invisible to someone reading the page without CSS, it’s decorative. Give the img an empty alt and skip the figure.

The rule is simple: if there’s no caption to add, no real context to provide, and the image isn’t referenced from the text, then the figure tag in HTML probably isn’t needed there.

16Figure in the Context of HTML5 Semantic Elements

The figure tag in HTML is one piece of the larger semantic HTML picture introduced in HTML5. If you’ve read our HTML5 beginner’s guide, you already know that HTML5 was largely about giving content more meaning through elements like <article>, <section>, <aside>, <header>, <footer>, <nav>, and more.

<figure> fits naturally into that world. It’s often used inside <article> elements, since articles frequently reference images, charts, and diagrams. Here’s a realistic nesting example:

<article>
  <h2>How CSS Grid Changed Web Layout</h2>
  
  <p>
    Before CSS Grid, creating complex layouts required floats, clearfixes, 
    and a lot of trial and error. Grid made it genuinely straightforward.
  </p>

  <figure>
    <img 
      src="https://daniyaldev.com/wp-content/uploads/2026/01/social-share-scaled.png"
      alt="Side-by-side comparison of float-based layout code vs CSS Grid code"
      width="800" height="400">
    <figcaption>
      Left: the old float approach with clearfix hacks. 
      Right: the same layout in 6 lines of CSS Grid.
    </figcaption>
  </figure>

  <p>
    Grid's two-dimensional control over both rows and columns is what 
    makes it so powerful for real-world page layouts.
  </p>
</article>

This is exactly how these elements are meant to work together. The article provides the broader context, and the figure is a self-contained visual reference within it.

17What You Learned Today

You now have a solid, complete understanding of both the figure tag in HTML and the figcaption tag in HTML, how they work, when to use them, and why they matter.

Quick recap of the key points:

• The figure tag in HTML creates a semantic container for self-contained, referenced content.
• The figcaption tag in HTML provides a visible caption that’s semantically linked to the figure’s content.
• Alt text and figcaption serve different purposes: description vs. context. Don’t duplicate them.
• Figure isn’t just for images; code blocks, blockquotes, tables, and media all fit.
• The default browser margin on figure should always be reset with CSS.
• Screen readers benefit from the semantic relationship created by figure and figcaption.
• Search engines can use figcaption text as additional context for your images.

The best way to internalize this is to start applying it in your own pages. Next time you’re adding an image with a caption, reach for <figure> and <figcaption> instead of a div and a paragraph. It’s a small change that adds real semantic value, and over time these habits build pages that are genuinely well-structured.

Up next in this series, we’re covering lazy loading images in HTML with the loading="lazy" attribute, one of the most practical performance wins you can add to any page with a single line of code.