HTML Figure Tag: Syntax, Usage, and Examples

The HTML figure tag groups media content, like an image or code sample, with an optional caption that explains it. It helps your page read better for humans and for tools that interpret page structure.

Introduced as part of HTML5, was designed to represent self-contained content — content that makes sense on its own, even when separated from its surrounding text.

How to Use the Figure Tag

You use the figure tag with the <figure> element. Place the media you want to present inside it, then add an optional <figcaption> to describe that media.

Here’s the basic pattern:

<figure>
<!-- media or other content -->
<figcaption><!-- caption text --></figcaption>
</figure>

A few details that matter:

• <figure> can contain many kinds of content, not just images. Think video, diagrams, charts, tables, code snippets, SVG graphics and even quotes.
• <figcaption> is optional, but it’s common because it provides context.
• If you use <figcaption>, put it as the first or last child of <figure>. That keeps your markup predictable and aligns with common HTML guidance.
• The <figure> element can be moved around in the document without breaking the meaning of the main flow. That’s the idea behind “self-contained.”

The <figcaption> tag and the <figcaption> element are two ways to refer to the same thing. Developers use both terms interchangeably, just like they do with most HTML constructs.

Here’s a simple example with an image:

<figure>
<imgsrc="moon-lamp.jpg"alt="A small moon-shaped lamp on a desk" />
<figcaption>A moon lamp prototype on a walnut desk, photographed under warm light.</figcaption>
</figure>

If you want to style it, you usually target figure and figcaption with CSS:

<style>
figure {
margin:24px0;
  }

figcaption {
font-size:0.9rem;
margin-top:8px;
  }
</style>

That’s all the syntax you need to start using the figure tag in HTML.

When to Use the Figure Tag

The figure tag is useful whenever you have content that deserves to be “packaged” with a description. Here are several common situations where <figure> makes your markup clearer.

Add a caption to an image, chart, or diagram

Images often need context. A caption can answer the silent question readers have: “What am I looking at, and why should I care?”

A figure tag HTML pattern works well for:

• Blog images with explanations
• Charts showing results
• Screenshots in tutorials

Present code samples with a caption

Tutorials often drop a code block and move on. A short caption can make the snippet easier to scan, especially when a page has many examples.

Using the figure tag for code is also nice because the caption stays glued to the code block. No confusion about which explanation belongs to which snippet.

Embed media that should stand apart from the main paragraph flow

Videos, audio players, and interactive embeds can interrupt reading. Wrapping them in <figure> turns them into “this is a thing, and here’s what it means” content.

This works well for:

• Demo videos in docs
• Embedded maps in a travel page
• Audio clips in a language lesson

Mark up quotes that need attribution

A blockquote plus a caption-style attribution is a clean combo. It reads naturally and keeps the source tied to the quote.

Examples of the Figure Tag

Here are a few practical examples that show how the figure tag works beyond the “image with a caption” cliché.

1) Image with a helpful caption

<figure>
<imgsrc="keyboard-layout.png"alt="A keyboard layout highlighting the Enter key" />
<figcaption>The Enter key location on a standard US keyboard layout.</figcaption>
</figure>

Why this is good:

• The alt text describes the image itself.
• The caption adds context that sighted users can see right away.
• The <figure> groups them as one unit, so the meaning stays together.

2) Code snippet with a caption

<figure>
<figcaption>Example: A simple navigation bar with semantic HTML.</figcaption>
<pre><code>&lt;nav&gt;
&lt;a href="/docs"&gt;Docs&lt;/a&gt;
&lt;a href="/pricing"&gt;Pricing&lt;/a&gt;
&lt;a href="/contact"&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</code></pre>
</figure>

This is a strong use of the figure tag because the caption explains what the reader is about to see. It also makes your page easier to skim when someone is hunting for a specific example.

3) Video with a caption

<figure>
<videocontrolswidth="520">
<sourcesrc="flexbox-demo.mp4"type="video/mp4" />
    Sorry, your browser does not support embedded videos.
</video>
<figcaption>A short demo showing how flex items wrap on smaller screens.</figcaption>
</figure>

Captions for video can be a lifesaver. Someone might not want to play the clip yet, but they still want to know what it contains.

4) Quote with attribution

<figure>
<blockquote>
    “Programs must be written for people to read, and only incidentally for machines to execute.”
</blockquote>
<figcaption>Harold Abelson (often quoted in programming education)</figcaption>
</figure>

The figure tag HTML approach works here because the quote and attribution belong together as a self-contained piece of content.

Learn More About the Figure Tag

Figure vs. div

A <div> is a generic container. It says, “I’m grouping things,” but it doesn’t say why.

The figure tag says, “I’m grouping something self-contained, like media or a referenced snippet, and this content relates to the surrounding text.”

If the grouping has meaning, prefer <figure>. If the grouping is purely for layout and has no semantic value, a <div> can be fine.

Figure vs. picture

<picture> is for responsive image sources. It helps the browser choose the best image file. <figure> is for grouping media with optional captioning and meaning.

You can use them together:

<figure>
<picture>
<sourcesrcset="hero.avif"type="image/avif" />
<sourcesrcset="hero.webp"type="image/webp" />
<imgsrc="hero.jpg"alt="A developer presenting a project on a whiteboard" />
</picture>
<figcaption>A hero image with modern formats, backed up by a JPEG fallback.</figcaption>
</figure>

This combination is common in performance-minded sites. <picture> handles the file selection, and <figure> handles the semantics and caption.

Figure and accessibility

The biggest accessibility win comes from writing good alt text for images and clear captions for everyone.

Screen readers rely on the browser's accessibility API to parse the relationship between <figure> and <figcaption>. When these are properly paired, assistive tools can announce the caption alongside the media, giving users who can't see the image a fuller picture of what's on the page.

A couple of practical guidelines:

• Use alt to describe the image content.
• Use <figcaption> to explain why the image is on the page, what the reader should notice, or how to interpret it.

Example:

<figure>
<imgsrc="signup-chart.png"alt="A line chart rising from 200 to 900 signups" />
<figcaption>Signups increased after the onboarding flow was simplified.</figcaption>
</figure>

The alt describes what the chart shows. The caption explains what the reader should take from it.

Also, don’t use the title attribute as a substitute for a caption. Tooltips are inconsistent on touch devices and aren’t a dependable way to present key info.

Figure and SEO

Good captions also help search engines understand what your images and media are about. SEO benefits from descriptive captions because they give crawlers more text signals tied to your visual content. Think of a caption as a second chance to tell both readers and crawlers exactly what they're looking at — and why it matters on this page.

Figure tag and global attributes

Like other HTML elements, <figure> supports global attributes — attributes that work on any HTML element, such as class, id, style, and data-*. You can use them to target figures with CSS or JavaScript without any special setup. For example, adding an id to a figure makes it easy to reference or scroll to from elsewhere on the page.

<figure id="performance-chart" class="chart-container">
<img src="perf-graph.png" alt="Bar chart comparing load times across three frameworks" />
<figcaption>Load time comparison across React, Vue, and Svelte on a 3G connection.</figcaption>
</figure>

Can a figure have more than one image?

Yes. A <figure> can group multiple related items, like a set of screenshots or a small gallery, and then provide one caption for the whole set.

<figure>
<imgsrc="step-1.png"alt="Step 1 showing the settings menu" />
<imgsrc="step-2.png"alt="Step 2 showing the privacy options" />
<imgsrc="step-3.png"alt="Step 3 showing the save button highlighted" />
<figcaption>Three screenshots showing where to change privacy settings.</figcaption>
</figure>

If each image needs its own caption, use separate figures. That keeps the relationship clear.

Where should figure live in the page?

You can place <figure> inside an article, section, or main content area. It can sit between paragraphs or inside a layout grid.

A common pattern in tutorials:

<article>
<h1>Understanding CSS Grid</h1>
<p>Grid makes layout feel less like juggling plates.</p>

<figure>
<imgsrc="grid-diagram.png"alt="A diagram showing rows and columns in a grid" />
<figcaption>A grid diagram showing two rows and three columns.</figcaption>
</figure>

<p>Next, you can place items using line numbers or named areas.</p>
</article>

This reads well, and the media feels “attached” to the part of the explanation it supports.

Common mistakes with the figure tag

• Using <figure> just to style something

If the content isn’t self-contained and you only want a wrapper for CSS, a <div> might be more appropriate.

• Skipping alt because you wrote a caption

Captions help, but alt still matters for images. They serve different audiences and situations.

• Writing captions that repeat the visible content

Always add context, even if it’s short.

• Forgetting that <figcaption> is optional

A figure without a caption is still valid. A silent figure can be fine for decorative images, but then you should consider if a figure is needed at all.