How do I group a figure with its caption in HTML?

Use a <figure> for self-contained content that can be treated as a unit, such as an image, illustration, diagram, or code example. Put its caption in a <figcaption> inside the figure. The caption can be the first or last child. [S1]

For example, if the sentence identifies what a diagram shows, the structure is:

<figure>
  [self-contained diagram]
  <figcaption>Figure 1. [Caption describing the diagram.]</figcaption>
</figure>

Replace the bracketed placeholders with your content and caption. The important relationship is structural: the caption belongs inside the same <figure> as the content it describes.

Being visually close does not make a paragraph the figure’s caption. A paragraph outside <figure> is not thereby associated with the figure as its caption; use <figcaption> inside the figure for that purpose. [S1]

For example, this places the sentence outside the group, so it is not the figure caption:

<figure>
  [self-contained image]
</figure>
<p>Figure 1. [Caption text]</p>

If the sentence is intended to caption the image, move it into a <figcaption>. If it is a separate explanation or discussion in the page, leave it as a paragraph outside the figure.

Ask what the sentence is doing. If it identifies or describes this particular image, chart, or other self-contained item, treat it as the caption and place it in <figcaption>. If it develops the page’s broader explanation, gives context, or discusses what the reader should do next, keep it in a regular paragraph outside the figure.

For instance, “Figure 2. Weekly sign-ups by channel” can caption a chart. A sentence such as “The next section explains how the totals were collected” is page-level commentary, not a caption. This is a practical writing choice: the HTML reference explains how to associate a caption, but it cannot decide what every sentence means in your particular document.

Check the relationship, not just the visual placement. Confirm that the content is a self-contained item you want grouped as a unit, and that its caption is inside the same <figure>. A figure is intended for self-contained content that can be referenced as a unit and moved elsewhere in the document without disrupting the main flow. [S1]

A compact pattern to adapt is:

<figure>
  [self-contained content]
  <figcaption>[caption for that content]</figcaption>
</figure>

Replace the placeholders with your content and caption. The reference supports this figure-and-caption pattern, but does not prescribe caption wording or settle every editorial decision about what counts as self-contained.