Embedded Media

Figure Image Caption

Media With Context

An image becomes easier to understand when the browser receives its source, useful alternate text, stable dimensions, and caption.

Program

Images are content when they carry information. The img element needs a source and alternate text, while figure and figcaption keep explanatory text attached.

figure_image_caption.html
Visuals: captured from real browser rendering
<figure>
  <img src="status-card.svg" alt="Green launch status card" width="240" height="120">
  <figcaption>Launch checks passed</figcaption>
</figure>

  1. Create a figure container.

    An empty figure card appears.
    The figure groups media and its caption as one unit.

  2. Load the status image source.

    A green launch status image appears inside the figure.
    The src attribute tells the browser which image resource to render.

  3. Describe the image with alt text.

    The same image remains visible with a text alternative in the document state.
    Alt text is not decoration; it is the replacement description for the image content.

  4. Reserve stable image dimensions.

    The browser reserves a stable 240 by 120 image box.
    Width and height reduce layout shift while the image loads.

  5. Attach a visible caption.

    The figure now shows the image and the Launch checks passed caption.
    The figcaption keeps visible context tied to the image.
alt text Alt text describes the image when the pixels are unavailable or not useful to the reader.
figcaption A figcaption gives a figure visible context that stays grouped with the media.