Table of contents

HTML <caption> Tag

What is HTML <caption> Tag?

The HTML caption tag is used to add a title or heading to a table. It helps users understand what the table represents. The caption appears just above the table by default and gives context to the data inside the table.

This tag is important because it improves accessibility and makes your content more structured. Screen readers use it to describe the table, which helps visually impaired users. It is always placed immediately after the opening <table> tag and before any other table elements like <tr> or <th>.

Syntax of the HTML <caption> Tag

plaintext
<table>
  <caption>Table Title or Description</caption>
  ...table content...
</table>

The text written between the opening and closing <caption> tags is displayed as the table’s title.

Examples of HTML <caption> Tag

Example 1: Basic HTML Caption Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <table border="1">
    <caption>Student Grades - Scholar247</caption>
    <tr>
      <th>Name</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>John</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>B</td>
    </tr>
  </table>

</body>
</html>

In this example, the caption “Student Grades - Scholar247” appears above the table. It describes the purpose of the table and helps users understand what the data represents.

Example 2: SEO Optimized Caption Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <table border="1">
    <caption>Top Programming Languages 2025 | Scholar247</caption>
    <tr>
      <th>Language</th>
      <th>Popularity</th>
    </tr>
    <tr>
      <td>Python</td>
      <td>High</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Very High</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>Medium</td>
    </tr>
  </table>

</body>
</html>

This SEO-optimized example uses a descriptive caption with relevant keywords such as “Top Programming Languages 2025” and includes the brand “Scholar247.” This helps search engines better understand the table content and increases visibility.

Attributes of the HTML <caption> Tag

The HTML caption tag does not have any unique attributes of its own. However, you can style it using global attributes or CSS to control its position and appearance.

Commonly used styling attributes include:
• align: Defines the alignment of the caption (deprecated in HTML5; use CSS instead).
• style: Used to apply inline CSS for font, color, and alignment.

Best Practices for HTML <caption> Tag

• Always use a caption tag for tables that display data to improve accessibility.
• Keep the caption short, descriptive, and keyword-rich for SEO.
• Avoid repeating the same text that already exists in table headers.
• Use CSS to style your caption rather than deprecated HTML attributes.
• Place the caption immediately after the opening <table> tag for proper structure.

FAQs About HTML <caption> Tag

Q1: What is the purpose of the HTML caption tag?

The caption tag provides a title or description for a table, helping users understand the data it contains.

Q2: Where should the caption tag be placed?

It must be placed right after the opening <table> tag and before any table rows or headers.

Q3: Does the caption tag support attributes?

The caption tag itself has no unique attributes. You can, however, use global attributes or CSS to style it.

Q4: Can I position the caption below the table?

Yes, you can use CSS like caption-side: bottom; to display the caption below the table instead of above it.

Q5: Is the caption tag important for SEO?

Yes, it helps search engines understand the context of tabular data and can slightly improve the SEO of structured content.

HTML

Related Articles