HTML caption Tag – A Complete Guide for Beginners

Introduction: Why the `<caption>` Tag Is Important

When users see a table, they should immediately understand what the table is about.
Headings (<th>) label columns and rows—but they don’t describe the overall purpose of the table.

That’s where the HTML <caption> tag comes in.

The <caption> tag provides a clear title or description for a table, improving:

Readability
Accessibility
SEO clarity
Professional presentation

What Is the HTML caption Tag?

The HTML <caption> tag is used to define a title or description for an HTML table.

In simple words:
<caption> tells users and screen readers what the table is about.

Where Is the caption Tag Placed?

The <caption> tag must be placed:

Immediately after the opening <table> tag
Before any <tr>, <thead>, <tbody>, or <tfoot>

Correct Placement

<table>
  <caption>Student Marks List</caption>
  ...
</table>

Incorrect Placement

<table>
  <tr>...</tr>
  <caption>Student Marks List</caption>
</table>

Basic Syntax of `<caption>`

Key Points

<caption> is a paired (container) tag
Only one <caption> per table
Visible by default (usually above the table)

Simple Example: Table with Caption

<table border="1">
  <caption>Student Marks</caption>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>85</td>
  </tr>
</table>

Output Explanation

“Student Marks” appears as the table title
Helps users quickly understand the table’s purpose

Default Behavior of `<caption>`

By default:

Caption appears above the table
Text is usually center-aligned
Style depends on the browser

You can fully customize it using CSS.

Styling `<caption>` with CSS

Change Font, Color, and Spacing

Move Caption Below the Table

Useful for reports or academic tables.

Align Caption Text

Using caption with thead, tbody,tfoot

<table border="1">
  <caption>Monthly Sales Report</caption>

  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>₹50,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Total</th>
      <td>₹50,000</td>
    </tr>
  </tfoot>
</table>

caption vs Table Heading (th)

Feature	`<caption>`	`<th>`
Purpose	Table title	Column/row labels
Scope	Whole table	Specific cell
Accessibility	High	High
Required	Optional	Recommended

Use both together for best results.

HTML caption and SEO

Helps search engines understand table context
Improves content clarity
Indirect SEO benefit through better structure and UX

Common Beginner Mistakes

Placing <caption> outside <table>
Using <p> instead of <caption>
Using multiple captions in one table
Styling table title with <th> instead of <caption>
Hiding caption text without alternatives

Best Practices for Using caption

Always place <caption> right after <table
Use clear, descriptive titles
Keep captions short and meaningful
Style captions using CSS
Use one caption per table

Real-World Example: Timetable

<table border="1">
  <caption>Class 10 Weekly Timetable</caption>
  <tr>
    <th>Day</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Math</td>
  </tr>
</table>

FAQs: HTML caption Tag

What is the `<caption>` tag used for?

To provide a title or description for a table.

Can a table have more than one caption?

No, only one <caption> is allowed.

Is `<caption>` mandatory?

No, but strongly recommended.

Can I style `<caption>` with CSS?

Yes, fully customizable.

Does `<caption>` help accessibility?

Yes, significantly.