A picture may be worth a thousand words, but the ability to stick a few more words underneath it can still be a big help. Here’s how you can add a caption under your website’s images.

The general idea is to tie the image and the caption text together, so that wherever you post the image the caption will fall neatly underneath. Luckily HTML provides a great way to accomplish this via the div element. By throwing a div around both the image and the caption, you can essentially store them both in one box. It’s then easy for you to move the box around your site without changing the image and caption’s relative positions.

Take this image for example:



You can add a caption underneath this image just by typing it in, but it probably won't line up correctly and if you were to center or right-align the image you'd have real trouble getting the text to match. Instead, simply include the image and desired caption in a div element as follows:

<div>
<img src="owl.jpg"><br>
The majestic great horned owl
</div>

Now when you post the div to your site you'll see something like this:



This works pretty well, but the text isn't aligned correctly under the image – which we can change easily enough by adding a Cascading Style Sheet (CSS) rule to the mix. Wrapping the text in its own div element with the code 'style="text-align: center; width: 200px;"' will cause the text to center itself with respect to the larger div. Be sure to add a width attribute that matches your image's width, or the caption will center itself with respect to the page instead! Now the image and caption will look like this:



You can change the outer div's alignment using the "align" attribute and the image and caption will stay together, like this:



You can also use CSS rules to adjust your image and caption's appearance. Suppose for example you'd like a little space between the image and caption; you can simply add 'style="margin-bottom: 10px;"' to the img tag and your image and caption will now look like this:



On many older sites and a few newer ones, you might notice that the web developers use tables rather than divs to lay out images. This is acceptable, but the preference is always to use divs for positioning and use tables to present data – this is, after all, what tables are really meant to do in HTML!