1. Technology

How To Add a Caption to Your Images that Stays with the Image

By

Captions provide extra information about your Web images, but they can be difficult to add to Web pages without some extra HTML and CSS. This tutorial explains how to add a simple, yet nice looking caption to your images that will stick with your image where ever you place it on the page.

Difficulty: Average
Time Required: 5 minutes

Here's How:

  1. Add your image to your Web page. If you have questions about how to do this, read my how to: How to Add an Image to Your Web Page.
  2. Place a div tag around the image:
    <div><img src="URL" alt="alternate text" width="width" height="height" /></div>
  3. Add a style attribute to the div tag:
    <div style=""><img src="URL" alt="alternate text" width="width" height="height" /></div>
  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" /></div>
  5. I like my captions to be slightly smaller than the surrounding text, so add a font-size property to your div style:
    <div style="width:image width px; font-size:80%;"><img src="URL" alt="alternate text" width="width" height="height" /></div>
  6. Captions look best if they are centered below the image, so add a text-align property to your 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>
  7. Finally, you'll want a little more space between the image and the caption, so you'll need to add a style attribute to your image with a padding-bottom style property on it:
    <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>
  8. Then add your 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>
  9. Upload your Web page to your server and test it in a browser.

Tips:

  1. Widths: Remember that CSS dimensions can be in many different measurements, so you must always include the measurement type, ie.
    width: 100px;
    Image dimensions are always in pixels, so you leave the measurement off, ie.
    width="100"
  2. If you make the width of your div wider than the image width, your 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.
  3. If you want your text to wrap around this image, you need to put the float style property or align attribute on the div tag rather than the image itself.
Related Video
How to Add Alt Text to a Web Page Image
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Graphics
  6. Add a Caption to Your Images That Stays With the Image

©2014 About.com. All rights reserved.