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.

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, 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 text. That’s the idea behind “self-contained.”

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.

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.

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

  A caption like “Screenshot” doesn’t help anyone. Add context instead, 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.