The <caption> element gives a table a real, semantically-attached title — describing what the table actually contains.
Syntax
<table>
<caption>Table title</caption>
<tr><td>...</td></tr>
</table>Basic Example
<table>
<caption>Course Fee Comparison</caption>
<tr><th>Course</th><th>Fee</th></tr>
<tr><td>Data Science</td><td>₹45,000</td></tr>
</table>Browser output: "Course Fee Comparison" renders centered above the table by default, in normal (non-bold) text.
How It Works
<caption> must be the first child immediately inside <table> — before any <thead>, <tr>, or other content. A table can have at most one caption.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Only universal global attributes apply; positioning is controlled with CSS caption-side |
Real-World Example
<table>
<caption>Student Attendance — March 2026</caption>
<tr><th>Student</th><th>Days Present</th></tr>
<tr><td>Aman</td><td>22</td></tr>
</table>A specific, informative caption naming both what the table shows and the relevant time period — far more useful than a generic heading placed loosely above the table with no real connection to it.
Comparison: caption vs a heading before the table
<caption> | An <h2> placed before the table | |
|---|---|---|
| Semantic link to the table | Explicit — programmatically tied to this specific table | None — purely visual proximity, no real connection |
| Screen reader behavior | Announced as part of navigating into the table | Read separately, with no guaranteed association |
Common Mistakes
- Using a nearby
<h2>/<h3>instead of a real<caption>, losing the explicit, machine-readable connection to the table - Placing
<caption>anywhere other than as the table's very first child
Best Practices
- Give every meaningful table a real
<caption> - Keep captions specific and descriptive, not generic ("Table 1")
Accessibility Considerations
A screen reader announces the caption when a user navigates into the table, immediately giving context about what they're about to hear — a real, structural benefit over a nearby but disconnected heading.
SEO Considerations
Caption text is genuine, readable content that helps search engines understand exactly what a table represents.
Browser & Modern HTML Notes
Stable and simple; CSS's caption-side property can move the caption to display below the table instead of above, without changing its position in the HTML source.
Mini Practice
- Add a specific, descriptive
<caption>to a table currently using a nearby<h3>instead. - Move a caption to render below its table using CSS
caption-side: bottom;, without changing the HTML.
