How to Add a Web Caption That Stays With Its Image

by
Jennifer Kyrnin
Freelance Contributor
Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.
our editorial process
Jennifer Kyrnin
Updated on March 09, 2020
reviewed by
Jessica Kormos headshot
Jessica Kormos
Lifewire Tech Review Board Member
Jessica Kormos is a writer and editor with 15 years' experience writing articles, copy, and UX content for Tecca.com, Rosenfeld Media, and many others.
our review board
Article reviewed on Jun 30, 2020
Jessica Kormos

Images add life to your web pages and draw the attention of viewers. Captions provide extra information about your web images, but they can be difficult to add to web pages without advanced HTML and CSS skills.

Illustration of a person typing code on a laptop and updating a website image with a caption
Lifewire / Derek Abella

Here's a reliable method for adding a simple, yet attractive, caption to an image that stays with the image wherever you move it on the webpage.

Steps to an HTML Image Caption

  1. Add an image to your webpage.

  2. In the HTML for your webpage, place a div tag around the image: 

    <div><img src="URL" alt="alternate text" width="width" height="height" /><

  3. Add a style attribute to the div tag: 

    <div style=""><img src="URL" alt="alternate text" width="width" height="height"

  4. Set the width of the div to the same width as the image, with the width style property: 

    <div style="width:image width px;"><img src="URL" alt="alternate text" width="width" height="height"

  5. For captions that are slightly smaller than the surrounding text, add a font-size property to the div style: 

    <div style="width:image width px; font-size:80%;"><img src="URL" alt="alternate text" width="width" height="height"

  6. Captions look best if they are centered below the image, so add a text-align property to the style attribute: 

    <div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height"

  7. Finally, add a little extra space between the image and the caption, by adding a style attribute to the image with a padding-bottom style property: 

    <div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" style="padding-bottom:0.5em;"

  8. Then add the text caption directly below the image: 

<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" style="padding-bottom:0.5em;" />This is my caption




Upload the webpage to your server and test it in a browser.




 
  Captioning Tips  



CSS dimensions can be in many different measurements, so you usually must include the measurement type. For example:






However, HTML image dimensions are always in pixels, so you leave the measurement off.






If you make the width of the div wider than the image width, the caption may appear beside the image. If this is what you want, then add a <br> tag directly before the caption and after the image tag.