How to Add a Caption in HTML Under a Photo

Since the primary purpose of HTML is to mark-up text, adding a caption under a photo on a webpage is not difficult. Now with HTML5 out, there is even a tag meant for captions -- the "<figcaption>" tag. Whether or not you use this new tag, you need to use CSS code to style the caption. Styling might include a gray box around the caption or italic text to let visitors know the caption text is not part of the webpage's main content.

Instructions

1. • 1
     Open up your HTML file in the plain text or code editor of your choosing. Find the "<img>" tag for the image you want to add a caption under. The "<img>" tag contains at least the filename of the image, which looks like this:
     <img src="filename.jpg">
     An "<img>" tag may also contain attributes other than "src" such as "width" or "class."
     
     
     
   • 2
     Add the tag "<figure>" before the "<img>" tag and then close it out by adding "</figure>" after the "<img>" tag. This is an HTML5 tag that will not get styled in Internet Explorer versions 8 and below. If you are concerned about backwards compatibility, either install JavaScript to the site to make older browsers see HTML5 or use the "<div>" tag instead of the "<figure>" tag.
   • 3
     Add the "<figcaption>" and "</figcaption>" tags after the "<img>" tag but before your "</figure>" or "</div>" tag. If you need backwards compatibility and are not using JavaScript to handle that, then use another "<div>" tag in this spot instead of the "<figcaption>" tags. Between your "<figcaption>" or "<div>" tags here, add the text for your caption. If using "<div>" tags, add a class to them like this:
     <div class="figcaption">Your caption here.</div>
     This gives you a way to target only "<div>" tags containing captions. The browser will display all "<div>" tags of the "figcaption" class in the same way.
   • 4
     Open up your website's CSS file. If one does not exist, you can add CSS code between "<style>" and "</style>" tags in your website's header. Use CSS code to style the caption like so:
     figcaption {background: #eee; color: #555; border: 1px solid #555; font-style: italic;}
     This code example styles the caption with a light gray background, colors the font and a thin border a darker gray and it also italicizes the text. You can use CSS code to style the caption in any way you like. Here is the same styling, applied to the "<div>" tag instead:
     div.figcaption {background: #eee; color: #555; border: 1px solid #555; font-style: italic;}