All language subtitles for 25 - Figure and figcaption.en

- Now that we've dug fairly deep

into how to put an image on a web page,

let's look at how to pair a caption for that image

with the image itself.

There are two more elements related to images,

or really rather, related to figures.

Here's a simple example.

We'll start with the image of our dog

and a caption for this image.

Maggie the dog enjoys resting in a field

after a long day of chasing squirrels.

Now let's wrap this text in the figcaption element.

That designates it is a caption.

And we'll wrap the image and the caption together

in a figure element.

This provides the browser

with more semantic information about this content.

More context than if we'd only use a paragraph element

or generic divs.

Search engines in AI will now know

that these two pieces of content

have a relationship to each other.

We could also use figure for things besides images,

like an interactive graphic.

We'll put it where the image element is in this markup.

The figure and figcaption elements

are handy for anything that appears as a figure

illustrating something,

or anything that's a demonstration of a concept

which needs a caption.