Image Captions

Code Snippet Library

We're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. The image caption goes between the <figcaption> tags.

Styling the Caption

By default, the caption is the same font and size as the page text, but you can style it if you wish. In this example, we added style attributes to the <figcaption> tag so that the caption is a smaller font and a blue color.

<figure style="margin: 0; width: 40%;">
    <img style="width: 100%;" src="Image Source URL"  alt="descriptive text" />
<figcaption style="font-size: 85%; color: #1E407C;">Image Caption</figcaption>
</figure>

Quick Tip: Wrapping the Caption Text

You will notice that in this example the caption wraps so that it does not extend beyond the width of the image. This is because we put the width in the parent element, the <figure> tag. If you define the width in the <img/> tag, the caption will not wrap.

Best Practice: Use Percentages to Size Font 

We changed the font size using percentages to make it responsive. Doing that will also help people who are using a lot of magnification to see the page.