HTML Guides for cation

<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>