WebToolsPlanet
Developer Tools

HTML Figure Generator

Build a semantic HTML <figure> element with <figcaption> for accessible image markup — and copy the ready-to-use HTML.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HTML Figure Generator?

The HTML `<figure>` element wraps self-contained content — typically an image — that is referenced from the main document flow. The `<figcaption>` child provides a visible caption and improves accessibility by describing the visual content.

Using `<figure>` + `<figcaption>` instead of plain `<img>` tags gives screen readers and search engines additional semantic context about the relationship between the image and its description. The caption can appear before or after the image inside the figure.

How to Use HTML Figure Generator

1

Enter the image URL in the Src field

2

Add descriptive alt text for accessibility

3

Set optional width and height attributes

4

Write a caption and choose its position (above or below)

5

Optionally add an id or class to the figure

6

Copy the generated HTML

Common Use Cases

  • Adding captioned images to blog posts or documentation.
  • Creating accessible image markup for screen readers.
  • Wrapping charts or diagrams with descriptive captions.

Example Input and Output

A figure element with an image and caption below.

Configuration
Src: photo.jpg, Alt: A mountain at sunset
Caption: Figure 1 – Sunset over the mountains
HTML output
<figure>
  <img src="photo.jpg" alt="A mountain at sunset">
  <figcaption>Figure 1 – Sunset over the mountains</figcaption>
</figure>

Privacy

All HTML generation runs in your browser. No data is sent to any server.

Frequently Asked Questions

Is <figure> only for images?

No. <figure> can wrap any self-contained content that is referenced from the document: images, code snippets, diagrams, charts, audio, or video. <figcaption> then labels that content.

Where should <figcaption> appear?

The spec allows <figcaption> as the first or last child of <figure>. Placing it last (below the image) is the most common convention for photo captions; placing it first can work for charts where a title helps orient the reader before they see the graphic.

Related Tools