HTML <caption> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions(FAQ)

INTRODUCTION

The <caption> element in HTML is used to add a title or description to a table. It helps provide context about the table's data, improving accessibility and clarity.

When <caption> element is used it should be the first child of table. This tag is placed immediately after the <table> tag.

Syntax:


<table>
    <caption> - TEXT - </caption>
</table>

Example:


<table>
    <caption>Monthly Sales Report</caption>
    <tr>
        <th>Month</th>
        <th>Sales ($)</th>
    </tr>
    <tr>
        <td>January</td>
        <td>10,000</td>
    </tr>
    <tr>
        <td>February</td>
        <td>12,000</td>
    </tr>
</table>

Output:

Monthly Sales Report
Month	Sales ($)
January	10,000
February	12,000

Usage Guidelines

The <caption> element should be the first child of table. and is placed immediately after the <table> tag.
When a <table> is the sole content inside a <figure> element, the caption should be provided using a <figcaption> for the <figure>, rather than using a <caption> inside the <table>
Applying a background color to a table does not affect its caption. To maintain consistent styling, you need to apply the background-color separately to the caption element.

ATTRIBUTES

The <caption> element only has global attributes.

Tag Omission

The HTML <caption> element end tag can be omitted if the element is not immediately followed by ASCII whitespace or a comment.

Frequently Asked Questions (FAQ)

Can a HTML table have multiple <caption> elements?

No, an HTML table cannot have multiple caption elements. According to the HTML specification, a table element can contain at most one caption element, and it must be the first child of the table if present.

Is the HTML caption tag compulsory for all HTML tables?

While not mandatory, including a caption is recommended, especially for complex tables, as it enhances accessibility and provides context. Ask The Dev

Can the HTML caption tag placed outside of a the <table> element?

No, the caption tag is specifically designed for use within a table element.

What is the difference between HTML <caption> and <figcaption> elements?

The caption tag is used exclusively for tables, whereas figcaption tag is used within <figure> elements to provide captions for images, illustrations, or other content.

How does the HTML caption tag affect accessibility?

Screen readers announce the content before reading the table, helping users understand the table's purpose and content.

Can the caption element include other HTML elements inside a it?

Yes, inline elements like span, b, or i can be used within a caption for styling purposes.