What is the HTML <figure> Tag and How to Use It

The <figure> tag in HTML is used to group media content like images, illustrations, or diagrams along with their captions. It helps keep the media and its description together as a single unit in the page layout.

How It Works

The <figure> tag acts like a container that holds media content such as images, charts, or code snippets, along with a caption that explains or describes it. Think of it like a photo frame that keeps a picture and its label together so they don’t get separated.

This tag helps browsers and screen readers understand that the media and its caption belong together, improving accessibility and organization. The caption is usually added inside a <figcaption> tag, which is placed inside the <figure> container.

Example

This example shows an image with a caption inside a <figure> tag. The caption explains what the image is about.

html

<figure>
  <img src="https://via.placeholder.com/150" alt="Sample placeholder image">
  <figcaption>This is a sample placeholder image.</figcaption>
</figure>

Output

An image of a gray box with text '150 x 150' and below it the caption: This is a sample placeholder image.

When to Use

Use the <figure> tag when you want to group media content with a caption that explains or adds context to it. This is common for images, diagrams, photos, code examples, or charts.

For example, in articles or blogs, you might use <figure> to keep a photo and its description together so readers clearly understand what the image shows. It also helps screen readers announce the caption along with the image, improving accessibility.

Key Points

• The <figure> tag groups media and its caption.
• Use <figcaption> inside <figure> to add a caption.
• Improves page structure and accessibility.
• Commonly used for images, diagrams, and code snippets.

Key Takeaways

The

tag groups media content and its caption as one unit.

Use

inside

to add descriptive captions.

It improves accessibility by linking images with their descriptions.

Ideal for images, diagrams, photos, and code examples in content.