<figure>

The figure tag is used for self-contained content, like illustrations, diagrams, photos, etc.

Syntax

The <figure> tag is related to the main flow but its position is independent, meaning if it is removed it should not affect the flow. The <figcaption> tag can be used inside the <figure> tag to add a caption for it.

<figure>
  <img src="picture.jpg" alt="A picture">
  <figcaption>This is the caption for this picture.</figcaption>
</figure>

Browser Compatibilty

Demos

User-submitted codepen.io examples of <figure> ↴

@steime

See the Pen on CodePen.

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates <figure>: