How to write a caption under an image?

html

css

responsive-design

accessibility

byAlex Kataev·Aug 19, 2024

Leverage <figure> and <figcaption> tags to create HTML image captions:

<figure>
  <img src="image.jpg" alt="Alt text" width="width" height="height">
  <figcaption>Your caption magic happens here</figcaption>
</figure>

This snippet bonds the image and caption, enhancing accessibility and playing nice with SEO.

Considering the importance of images in web pages, captions can enrich their storytelling, enhancing user experience. Beyond aesthetics, they can serve as an effective SEO strategy. Let's see how to code this in elegance.

Beautify captions with CSS

CSS is what amplifies the suave factor in HTML. Use it wisely to manage the location and appearance of your image captions:

To restrict the caption's width to the image's size, use max-width on <figcaption> combined with text-align: center; to center the text.
Creating an inline look for your paired image and caption is possible using a div tag and applying display: inline-block;.
Envelope the image with an <a> tag for hyperlinking. Unwanted underlines can be banished with text-decoration: none;.
For floats in your layout, use overflow: hidden; to avoid layout interruptions.

Aesthetic points like spacing matter too! Use CSS to control margin and padding, ensuring your design breathes well. Also, remember to pick a font size and style for your caption that complements, not contrasts, the image.

Master advanced captioning

Craft responsive captions and images

Employ the services of the <picture> and <source> elements for responsive designs:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(min-width: 450px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Busy bee resizing images" style="width:auto;">
  <figcaption>Your caption scales along</figcaption>
</picture>

This strategy ensures the perfect fit for different devices, enabling clean readability and design consistency.

Floats and bridle layout

Floats can have a mind of their own. To keep your layout from falling apart, use overflow: hidden; on the parent container.

Styles and the wow factor

Enhance your image's visual impact with captions that are smaller in dimensions. Maintain a balance but still ensure your caption leaves a mark.

Pro tips and guardrails

HTML5 semantics

Remember to abide by HTML5 semantics. The <figure> and <figcaption> are not just decoration; they are essential context providers, especially for assistive technologies.

Alt attribute

Emphasis on accessibility again! Use the alt attribute to describe your image for users who cannot access the image directly.

Width and height in the picture

For a smooth user experience, declare your image's width and height attributes directly in the HTML. This prevents layout shifts during loading faster than Flash.

Hyperlinked captions and images

When hyperlinking an image caption pair, ensure consistency by extending the hyperlink to the entire figure, not just the image. This way, the relationship status: always together! 😉

Incorporating these pointers will go a long way in making your image captions not just visually impressive but well-structured too.

explain-codes / Html / How to write a caption under an image?

Linked

How to change source of <img> tag on hover?



Css background image alt attribute



Input type="submit" Vs button tag are they interchangeable?



Html img tag: title attribute vs. alt attribute?



Should image size be defined in the img tag height/width attributes or in CSS?