HTML <caption> Tag
The HTML <caption> tag defines a title for a table. It must be the first child of <table>. Learn its syntax, styling, and accessibility with examples.
The <caption> tag is used to define a title or description for a table. It is not a column header (use <th> for that). The tag itself must be inside the <table> element immediately after the opening tag, and it must be the first child of its parent <table> element. Only one caption is allowed per table.
By default, a table caption is center-aligned above the table. You can use the text-align and caption-side properties to align and position it.
When to use <caption> vs <figcaption>
There are two ways to label a table, and the correct one depends on the table's container:
- Use
<caption>when the table stands on its own. The caption belongs inside the<table>and is programmatically tied to it. - Use
<figcaption>when the table is the only content of a<figure>element. In that case the figure provides the labeling, so a separate<caption>is not used.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Here the table is the figure's sole content, so the label lives in <figcaption> (which, unlike <caption>, can also be placed after the table).
Syntax
The <caption> tag comes in pairs. The content is written between the opening (<caption>) and closing (</caption>) tags.
Example of the HTML <caption> tag:
HTML <caption> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Result
The rendered table shows the caption "Evaluation paper" centered above the data:
Example of the HTML <caption> tag with the CSS caption-side property:
Example of the HTML <caption> tag with the CSS caption-side property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left, right, center, top, bottom | Aligns the caption horizontally or vertically. Not used in HTML5. Use CSS caption-side instead. |
The <caption> tag supports the Global Attributes and the Event Attributes.
Accessibility: why <caption> matters
A <caption> is more than a visible title — it is the table's accessible name. Because the element is a child of <table>, browsers associate the two automatically; you do not need aria-labelledby or any extra markup. When a screen reader enters the table, it announces the caption first, giving the user context ("Evaluation paper, table with 3 columns") before reading any cells. Without a caption, the user hears a stream of numbers with no idea what they describe.
When the title must be visually hidden
Sometimes a heading already sits next to the table and a visible caption would look redundant. Don't drop the caption — that removes the context for non-sighted users. Instead, keep the <caption> and hide it visually with CSS while leaving it in the accessibility tree:
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}An aria-label on the <table> can also supply an accessible name, but <caption> is preferred: it works without ARIA, it is part of the document text (so it is translated and searchable), and the visually-hidden technique keeps it readable to sighted developers. Reach for aria-label only when you cannot add a caption to the markup.
<caption> replaces the deprecated summary attribute
Older HTML had a summary attribute on <table> that held a description for screen-reader users. It was never visible and is obsolete in HTML5 — don't use it. The modern, accessible replacement is a <caption> for the short title, plus a regular paragraph (optionally linked with aria-describedby) when a longer explanation of the table's structure is needed.
How to style the <caption> tag
The caption is a block-level box you can style like any other element. The most common adjustments are its position relative to the table, its alignment, and its emphasis:
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}See the caption-side and text-align properties for more detail, and the <table> tag for full table markup.