A table of sports results, a pricing comparison, a weekly schedule: as soon as a page shows several tables, a visitor skimming through them needs to know at a glance what each one is about, without reading every cell to guess it. A visual title placed just above the table, sitting outside it, roughly fools the eye but says nothing to a screen reader stepping through the document table by table.
The <caption> tag answers that need precisely. It gives a title to the table that contains it, right inside the table's own structure, which makes it inseparable from the table for any technology that interprets it.
Definition
<caption> holds the title of a table. It describes in a short sentence what the table represents, much the way a chart title sums up its content. Unlike a title placed above the table in a plain paragraph, <caption> is a genuine part of the table's own structure.
A unique spot: the first child of table
The placement rule allows no exception: <caption>, when present, must be the very first direct child of <table>, even before an optional <colgroup>. Only one <caption> is allowed per table. Placed anywhere else, it loses its validity and stops being recognised as the table's title by assistive technologies.
<table>
<caption>
First quarter sales by region
</caption>
<thead>
<tr>
<th>Region</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>North</td>
<td>$12,400</td>
</tr>
</tbody>
</table>The browser displays this title centred above the table by default, but its visual position can be fully customised in CSS. What never changes is its place in the code: always first, never anywhere else.
Why it matters for accessibility
A screen reader that meets a table generally announces its title before it even starts reading out column headers or cells. The user therefore knows what to expect before getting into the table's detail, much like a sighted visitor who reads a title first before scanning rows and columns. That single announcement often makes the difference between skipping a table that turns out irrelevant and settling in to read one that actually answers the question at hand.
Without <caption>, a screen reader announces a table with no context at all: "table, 4 columns, 12 rows", without saying what it is about. The user then has to step through several cells before understanding the subject, something a title announced first avoids entirely.
caption and legend, the same role for two containers
<legend> plays exactly the same role as <caption>, for a different container. <legend> titles a group of form fields, while <caption> titles a data table. Both tags share the same positioning constraint, right at the start of their container, and the same purpose, giving overall meaning to a set before detailing its content.
| Tag | Container | Role |
|---|---|---|
<caption> | <table> | Title of a data table |
| <legend> | fieldset | Title of a group of form fields |
Frequently asked questions
caption be replaced with a plain h3 heading above the table?Technically yes, but it is not equivalent for accessibility. A title placed outside the table is only linked to it visually, through its proximity on screen. <caption>, on the other hand, creates an explicit structural association that assistive technologies recognise automatically, with no reliance on layout.
caption be styled with CSS without breaking its function?Yes, fully. Visual position, colour, font size and alignment can all be changed in CSS without the tag losing its semantic role. What styling changes is the on screen appearance, not <caption>'s place in the code nor what it announces to assistive technology.
caption is not the first child of table?The browser often silently fixes the mistake by moving the element, or simply ignores it depending on the case, which makes behaviour unpredictable from one engine to another. The safest result stays to always write <caption> first, right after the opening <table> tag.