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

Image URL (src)

Alt text

Width (px)

Height (px)

Caption

Caption position

class

Generated HTML

<figure>
  <img src="image.jpg" alt="Description of the image">
  <figcaption>Figure 1 – Caption text here</figcaption>
</figure>

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

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

Enter the image URL in the Src field

Add descriptive alt text for accessibility

Set optional width and height attributes

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

Optionally add an id or class to the figure

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

HTML Video Generator

Generate HTML <video> elements with multiple source formats, poster image, controls, autoplay, loop, muted, preload, width, and height. Live preview included.

HTML Link Generator

Generate HTML anchor tags with href, target, rel, title, download, and other attributes. Copy ready-to-use link code instantly.

HTML Button Generator

Generate HTML button elements with type, id, class, style, onclick, disabled, aria-label, and other attributes. Preview included.

HTML Blockquote Generator

Generate HTML blockquote elements with quote text, citation URL, attribution, and optional figure/figcaption semantic wrapper.

HTML Table Generator

Generate HTML table code with configurable rows, columns, headers, borders, captions, and attributes. Copy ready-to-use table markup.

Code to Image Converter

Convert code snippets to beautiful images for sharing.