Add a Web Caption That Stays With Its Image

Add HTLM Captions to Web Images in 9 Easy Steps

Captions provide extra information about your web images, but they can be difficult to add to web pages without extra HTML and CSS. Here's a reliable method for adding a simple, yet nice-looking caption to an image. It stays with the image wherever you move it on the web page.

9 Steps to an HTML Image Caption

  1. Add the image to your web page. If you have questions about how to do this, read How to Add an Image to Your Web Page.
  1. Place a div tag around the image:
    <div><img src="URL" alt="alternate text" width="width" height="height" /></div>
  2. Add a style attribute to the div tag:
    <div style=""><img src="URL" alt="alternate text" width="width" height="height" /></div>
  3. 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" /></div>
  4. 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" /></div>
  5. 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" /></div>
  1. 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;" /></div>
  1. 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</div>
  2. Upload the Web page to your server and test it in a browser.

Captioning Tips:

  • Widths: CSS dimensions can be in many different measurements, so you must include the measurement type. For example:
    width: 100px;
    Image dimensions are always in pixels, so you leave the measurement off.
    width="100"
  • 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.
Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Add a Web Caption That Stays With Its Image." ThoughtCo, Sep. 20, 2016, thoughtco.com/caption-that-stays-with-image-3467838. Kyrnin, Jennifer. (2016, September 20). Add a Web Caption That Stays With Its Image. Retrieved from https://www.thoughtco.com/caption-that-stays-with-image-3467838 Kyrnin, Jennifer. "Add a Web Caption That Stays With Its Image." ThoughtCo. https://www.thoughtco.com/caption-that-stays-with-image-3467838 (accessed November 20, 2017).