How to Make an HTML Caption
Two types of captions exist in HTML: table captions and image captions. Image captions were introduced in HTML 5 and go inside "<figure>" tags that group images and captions together. You can add multiple images between a single "<figure>" tag set and give them one caption that displays under the entire set. Table captions display descriptive text above an HTML table. To style these captions, you need to add CSS (Cascading Style Sheets) code that targets either one of the caption tags.
Other People Are Reading
Instructions
-
-
1
Go to "Start" and enter "Notepad" in the search box. Navigate to "File" and "Open..." to open the file for your Web page. In most cases, this is an HTML file.
-
2
Add a caption to your HTML table using the "<caption>" tag:
<table>
<caption>This is a Table</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
This tag must come directly after the opening "<table>" tag as shown. Text between the "<caption>" tags becomes the table caption.
-
-
3
Add a caption to an image in HTML using the following code:
<figure>
<img src="path/to/image.png" alt="My Image">
<figcaption>This is my image.</figcaption>
</figure>
In HTML 5, the "<figure>" tag groups together an image and its caption. The "<figcaption>" tags wrap around the caption itself.
-
4
Style your captions in CSS:
figcaption {
font-style: italic;
}
Change "figcaption" to "caption" if you want to style the table caption instead of an image caption. Add your property-value pairs between the curly braces, separated by semicolons. You can add CSS code between "<style>" tags in the head of your Web page or in an external style sheet.
-
1
Tips & Warnings
The "<figure>" and "<figcaption>" tags work in HTML 5 only, so if you plan on making the captions work in older browsers, add an HTML 5 enabling script to your Web pages. Without the script, the caption will display but the styling will not work.
