HTML Guides for caption

<cation> is a misspelling of <caption>: rename the opening and closing tags to <caption> so the table gets its title.

HTML has no <cation> element, so the parser handles it like any unknown tag. A <table> only accepts <caption>, <colgroup>, <thead>, <tbody>, <tfoot> and <tr> as children (plus <script> and <template>), and an unknown element isn't one of them.

When the browser finds <cation> inside a table, it moves the element and its text out and puts them just before the table. The HTML specification calls this foster parenting. The text still shows up above the table, which makes the typo easy to miss on screen, but the table itself has no caption.

Screen readers announce a table's <caption> as its name. Without one, someone jumping from table to table hears the table with no title, and the stray text before it reads as an ordinary line. A caption hidden with a "visually hidden" class, written only for screen reader users, loses its whole purpose.

The validator stops checking the page at this error and adds Cannot recover after last error. Any further errors will be ignored. right after it. Nothing below that point gets checked, so new issues further down the page can show up once you fix this one.

To fix it, correct the spelling in both tags. Keep the <caption> as the first child of the <table>, since the HTML specification doesn't allow it anywhere else.

Invalid example

<table>

<cation>Monthly sales</cation>

<tr>

<th>Month</th>

<th>Total</th>

</tr>

<tr>

<td>January</td>

<td>1,200</td>

</tr>

</table>

Valid example

<table>

<caption>Monthly sales</caption>

<tr>

<th>Month</th>

<th>Total</th>

</tr>

<tr>

<td>January</td>

<td>1,200</td>

</tr>

</table>

A <p> can't sit directly inside a <table>, <thead>, <tbody>, <tfoot> or <tr>: put the paragraph inside a <td> or <th> cell, or move it outside the table.

Table elements only accept specific children. A <table> holds <caption>, <colgroup>, <thead>, <tbody>, <tfoot> and <tr>, and a <tr> holds <td> and <th>. A paragraph is allowed inside a cell or a <caption>, but not between rows.

When the browser's parser finds a misplaced <p>, it moves the paragraph out and inserts it just before the table. The HTML specification calls this foster parenting. A paragraph you wrote as a table title or a note between rows shows up above the table instead, and an empty <p></p> left between rows becomes an empty paragraph above it.

The validator stops checking the page at this error and adds Cannot recover after last error. Any further errors will be ignored. right after it. Nothing below that point gets checked, so new issues further down the page can show up once you fix this one.

To fix it, put a table title in a <caption>, move text that belongs to a row into a <td> or <th>, and delete empty <p></p> pairs between rows. If those empty paragraphs were there to add space between rows, use CSS padding on the cells or border-spacing on the table instead.

Invalid example

<table>

<p>Opening hours</p>

<tr>

<td>Monday</td>

<td>9:00 to 17:00</td>

</tr>

<p></p>

<tr>

<td>Saturday</td>

<td>Closed</td>

</tr>

</table>

Valid example

<table>

<caption>Opening hours</caption>

<tr>

<td>Monday</td>

<td>9:00 to 17:00</td>

</tr>

<tr>

<td>Saturday</td>

<td>Closed</td>

</tr>

</table>

A <caption> element only belongs inside a <table>, as its first child, so the validator reports any <caption> start tag it finds anywhere else.

The <caption> element is the title of a table. When the HTML parser meets a <caption> tag outside a table, it drops the tag: the DOM gets no caption element, and whatever was inside it becomes plain content of the surrounding element. The parser drops the closing tag as well, so the same spot usually also gets a "Stray end tag caption" error.

A common source is an image caption written as <caption> around an <img>. WordPress's [caption] shortcode turns into this markup when its square brackets get swapped for angle brackets, for example after pasting content from one editor into another. To caption an image, use a <figure> with a <figcaption> inside it.

If the caption belongs to a table, move it inside the <table> as its first child. A <caption> inside the table but after the rows gets a different error, saying caption isn't allowed as a child of table in that context.

Invalid example

<div class="photo">

<caption>

<img src="harbor.jpg" alt="Fishing boats moored in a harbor">

Fishing boats in the harbor at sunrise.

</caption>

</div>

<caption>Opening hours</caption>

<table>

<tr>

<th>Monday</th>

<td>9:00 to 17:00</td>

</tr>

</table>

Valid example

<figure class="photo">

<img src="harbor.jpg" alt="Fishing boats moored in a harbor">

<figcaption>Fishing boats in the harbor at sunrise.</figcaption>

</figure>

<table>

<caption>Opening hours</caption>

<tr>

<th>Monday</th>

<td>9:00 to 17:00</td>

</tr>

</table>

The <caption> element is designed to be a brief, descriptive label for its parent <table>. According to the HTML specification, <caption> accepts flow content but explicitly forbids descendant <table> elements. This restriction exists because a table nested inside a caption creates a confusing and semantically meaningless structure — the caption is supposed to describe the table, not contain another one.

Why this is a problem

• Accessibility: Screen readers announce the <caption> as the title of the table. A nested table inside a caption creates a confusing experience for assistive technology users, as the relationship between the tables becomes ambiguous and the caption loses its descriptive purpose.
• Standards compliance: The WHATWG HTML living standard explicitly states that <caption> must have "no <table> element descendants." Violating this produces a validation error.
• Rendering inconsistencies: Browsers may handle this invalid nesting differently, leading to broken or unpredictable layouts across different environments.

How to fix it

1. Remove the table from the caption. The <caption> should contain only text and simple inline elements like <span>, <strong>, <em>, or <a>.
2. Place the nested table outside the parent table, either before or after it, or restructure your layout so both tables are siblings.
3. If the data in the nested table is genuinely related to the caption's purpose, consider expressing it as plain text or using a different structural approach entirely.

Examples

❌ Incorrect: A table nested inside a caption

<table>

<caption>

Summary

<table>

<tr>

<td>Extra info</td>

<td>Details</td>

</tr>

</table>

</caption>

<tr>

<th>Name</th>

<th>Score</th>

</tr>

<tr>

<td>Alice</td>

<td>95</td>

</tr>

</table>

This triggers the validation error because a <table> appears as a descendant of the <caption> element.

✅ Correct: Caption contains only text, tables are separate

<table>

<caption>Summary — Extra info: Details</caption>

<tr>

<th>Name</th>

<th>Score</th>

</tr>

<tr>

<td>Alice</td>

<td>95</td>

</tr>

</table>

If the extra information truly requires its own table, place it as a sibling:

<table>

<caption>Summary</caption>

<tr>

<th>Name</th>

<th>Score</th>

</tr>

<tr>

<td>Alice</td>

<td>95</td>

</tr>

</table>

<table>

<caption>Additional details</caption>

<tr>

<td>Extra info</td>

<td>Details</td>

</tr>

</table>

✅ Correct: Caption with inline formatting only

<table>

<caption>

<strong>Quarterly Results</strong> — <em>All figures in USD</em>

</caption>

<tr>

<th>Quarter</th>

<th>Revenue</th>

</tr>

<tr>

<td>Q1</td>

<td>$1.2M</td>

</tr>

</table>

This is valid because the <caption> contains only text and inline elements (<strong>, <em>), with no <table> descendants.