Use figure for self-contained content that is referenced from the surrounding document. Images, diagrams, code samples, and quotations can all be figures.

Add a caption with figcaption:

<figure>
  <img
    src="harbor-route.png"
    alt="Map showing the harbor cycle route"
    width="900"
    height="600"
  >
  <figcaption>The harbor route avoids the busiest roads.</figcaption>
</figure>

The caption and alt text have different jobs.

The caption is visible to everyone and can add context. The alt text replaces the visual information in the image. Avoid copying the exact same sentence into both.

figcaption must be the first or last child of figure.

Not every image needs a figure. A small icon inside a button or a logo in the header is not normally a figure. Use it when the content and caption form a meaningful unit.