HTML <caption> Tag

The HTML <caption> tag is used for creating captions for the <table> element. A <caption> element represents the title of the table.

The <caption> element can be useful when it's not apparent what the data in the table represents. This is often true when a data contains nothing but numbers, or a series of letters or symbols. The <caption> element allows you to provide a context for the data in the table.

Syntax

The <caption> tag is written as <caption></caption> with the caption content inserted between the start and end tags. It must appear as the first child of a <table> element.

Like this:

Examples

Basic tag usage

This example shows a basic sample caption in a table. Although the <caption> tag is located inside the <table> tag, most (if not all) browsers display the caption outside the table.

Actual Usage

Here is an example of where the <caption> element can come in handy.

Note that you can use any flow content (except for the <table> element) within the <caption> element. So you can use the <p> tag to create paragraphs within the <caption> element, as well as other tags as required.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <caption> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <caption> tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <caption> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <caption> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The align element (which was deprecated in HTML 4) is obsolete in HTML5. Use the CSS align property to set the horizontal alignment. You can also use vertical-align to set the vertical alignment if required.

To see more detail on the two versions see HTML5 <caption> Tag and HTML4 <caption> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <caption> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <caption> Tag and HTML4 <caption> Tag.

Tag Details

For more details about the <caption> tag, see HTML5 <caption> Tag and HTML4 <caption> Tag.

Specifications

Here are the official specifications for the <caption> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.