<caption>

Definition

The HTML <caption> element is used to specify a short description or summary of a table. It is typically placed above or below a table and is used to provide context or a title for the table. The caption element should be used within the <table> element, and can only contain inline content.

Examples

<table>
	<caption>Employee salary information</caption>
	<tr>
		<th>Employee</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>Jane Doe</td>
		<td>$60,000</td>
	</tr>
	<tr>
		<td>John Smith</td>
		<td>$50,000</td>
	</tr>
</table>

In this example, the <caption> element is used to provide a title for the table, letting the reader know that the table contains employee salary information.

Attributes

This element makes use of the global attributes.

Best Practices

• The <caption> element should be used within a <table> element.
• The <caption> element should contain only inline content, such as text or other inline elements like <em> or <strong>.
• The <caption> element should be used to provide a title or brief summary of the table. It should not contain detailed information that belongs in the table itself.
• The <caption> element is typically placed above or below the table, but it can be positioned on the left or right side of the table using the caption-side CSS property.
• By default, the text within a <caption> element is centered and bolded. This can be changed using CSS.
• There can only be one <caption> element per table, and it must be the first or last child of the <table> element.
• The <caption> element is optional, and a table may not have a caption. However, it is a good idea to use a caption whenever it can help provide context or clarify the content of a table.

Accessibility Considerations

It is important to use the <caption> element to provide a title or summary for a table, because this can help people who are using assistive technologies like screen readers understand the content of the table.

However, it is also important to make sure that the caption is clear and concise, and does not contain too much detail. If the caption is too long or contains unnecessary information, it can be difficult for screen reader users to understand and navigate the table.

Additionally, the <caption> element should be positioned in a way that makes it easy for screen reader users to find and read. By default, the caption is placed above or below the table, but it can be positioned on the left or right side of the table using the caption-side CSS property. It is generally best to position the caption above or below the table, so that it is easy to find and read.

Browser Compatibility