HTML figure Tag: Responsive Design & Media Elements

The HTML figure tag links media with a caption. Use it to group an image, diagram, code block, or video with its description. It gives structure and meaning.

Understand the <figure > Tag in HTML

The tag wraps self-contained visual content. It holds one item with a related caption. It tells browsers and readers that the content and caption go together.

This tag is part of HTML5. It adds meaning to how browsers see content. Use it for media and code blocks with labels or notes.

Here is a list of items that show you the Difference Between <figure> and <div> in HTML5:

• The <figure> means the content and caption are one unit.
• The <div> means nothing. It only holds content with no meaning.
• Search engines and screen readers treat <figure> content as a group.

Here is an example:

<figure>
  <img src="cat.jpg" alt="A cat under a tree">
  <figcaption>A cat rests under a tree on a sunny day</figcaption>
</figure>

How it works:

• <figure> starts the block.
• <img> loads the image.
• <figcaption> adds a label to the image.

Use <figure> for content that:

• Has a caption
• Stands alone from the main flow
• Works without breaking the page if removed

Examples include:

• A chart with a title
• A photo with a note
• A code sample with a label

HTML <figure> vs <img> vs <figcaption>

Here’s the structure you need:

<figure>
  <img src="img.jpg" alt="Alt text">
  <figcaption>This caption links to the image above</figcaption>
</figure>

Hierarchy:

• <figure> is the outer tag
• <img> or other media goes inside
• <figcaption> also goes inside, before or after media

How these tags work together:

• <figure> holds the whole unit
• <img> adds the media
• <figcaption> links the caption to the media

This setup shows that all parts belong together.

Here is a table that shows you key differences:

Use <figcaption> Inside <figure>

You can place <figcaption> before or after media.

Caption first:

<figure>
  <figcaption>Tree with fog in winter</figcaption>
  <img src="fog.jpg" alt="Tree covered in fog">
</figure>

Caption after:

<figure>
  <img src="fog.jpg" alt="Tree covered in fog">
  <figcaption>Tree with fog in winter</figcaption>
</figure>

Both options work the same.

Styles of <figure> and <figcaption> with CSS

You can center or left-align captions. Use this format when you write your code:

<figure style="text-align: center;">
  <img src="desk.jpg" alt="Desk with laptop">
  <figcaption>Work desk with laptop</figcaption>
</figure>

You write it like this to avoid layout issues:

Use <figure> with <video>, <canvas>, or <pre>

This tag also wraps other visual elements.

With <video>:

<figure>
  <video controls>
    <source src="clip.mp4" type="video/mp4">
  </video>
  <figcaption>Short video clip of ocean waves</figcaption>
</figure>

With <pre> for code:

<figure>
  <pre><code>console.log('Hello World');</code></pre>
  <figcaption>JavaScript log function example</figcaption>
</figure>

Grouping Related Visual Content:

You can place more than one image inside <figure>.

<figure>
  <img src="one.jpg" alt="First image">
  <img src="two.jpg" alt="Second image">
  <figcaption>First and second image from same trip</figcaption>
</figure>

Browser Support and Compatibility

All modern browsers support <figure> and <figcaption>. That includes:

• Chrome
• Firefox
• Edge
• Safari
• Opera

Old browsers treat <figure> as a <div>. You do not need special fallback code.

Examples

Basic Image with Caption:

<figure>
  <img src="mountain.jpg" alt="Snowy mountain peak">
  <figcaption>Snow-covered peak during sunset</figcaption>
</figure>

This shows one image with a clear caption. The <figure> block keeps them together.

Code Sample with Label:

<figure>
  <pre><code><h1>Welcome</h1></code></pre>
  <figcaption>HTML heading example</figcaption>
</figure>

This links the code with its label. You can read and copy both easily.

Video with Caption:

<figure>
  <video controls>
    <source src="forest.mp4" type="video/mp4">
  </video>
  <figcaption>Walk through the forest trail</figcaption>
</figure>

This embeds a video with a matching title. <figure> groups them for clarity.

Two Related Images with One Caption:

<figure>
  <img src="before.jpg" alt="Before cleanup">
  <img src="after.jpg" alt="After cleanup">
  <figcaption>Comparison before and after cleanup</figcaption>
</figure>

This shows two images as one unit. The caption matches both.

Wrapping Up

In this article, you learned what the <figure> tag does and how to use it with <img>, <video>, or <code>. You also saw how to style it and when to use it.

Here is a quick recap:

• Use <figure> to group content and its label.
• Place <figcaption> inside <figure>.
• Use it for images, videos, charts, or code.
• Style with CSS for layout or alignment.
• Use it with all browsers.

Similar Reads