<figure>
A self-contained illustration — an image, a diagram, code or a quote — with a `<figcaption>` caption.
Syntax
<figure><img …><figcaption>Caption</figcaption></figure>Examples
A photo with a caption:
<figure>
<img src="/media/photo-400x250.jpg" alt="A cup of latte on a table" width="300">
<figcaption>Our signature latte.</figcaption>
</figure>A quote with its author:
<figure>
<blockquote>Coffee is a language in itself.</blockquote>
<figcaption>— Jackie Chan</figcaption>
</figure>Notes
<figcaption> goes first or last inside <figure>. By default <figure> has side margins (margin: 16px 40px) — they are often reset to zero.
See also
- <img> — An image.
- <blockquote> — A long quotation as a separate block.
- <picture> — A container for several versions of an image: the browser picks a matching `<source>` or falls back to `<img>`.
Related recipes
In the tutorial
- Images — The img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.