HTML Guides for typo

The validator reports a justify-content value that isn't one of the property's keywords, most often a misspelling such as flext-start for flex-start.

justify-content distributes free space along the main axis of a flex container, or the inline axis of a grid container. The validator accepts normal, flex-start, flex-end, start, end, center, left, right, stretch, space-between, space-around and space-evenly. A position keyword can take a safe or unsafe prefix, as in safe center. Keywords ignore case, so Flex-Start passes, but flex_start with an underscore doesn't.

Some wrong values belong to other properties. baseline and self-start work on align-items and justify-self, not on justify-content. middle comes from vertical-align; box alignment spells it center.

Browsers drop a declaration with an unknown value, and the container keeps whatever justify-content an earlier rule gave it, or the initial normal. In a flex container, normal packs the items at the start of the line, just like flex-start. A misspelled flex-start therefore often looks right in the browser. The typo only shows when the declaration was meant to override another one, as in a media query that changes the layout on small screens.

Invalid example

<style>

.toolbar {

display: flex;

justify-content: space-between;

}

@media (max-width: 600px) {

.toolbar {

justify-content: flext-start;

}

}

</style>

Valid example

<style>

.toolbar {

display: flex;

justify-content: space-between;

}

@media (max-width: 600px) {

.toolbar {

justify-content: flex-start;

}

}

</style>

The rel attribute on an <a> element contains a token that looks like a misspelled link type, such as _nofollow where nofollow was meant.

rel holds a space-separated list of keywords that describe how the current page relates to the linked resource. Browsers and search engines only act on the keywords they recognize, and they compare each token as written, ignoring case. A near miss such as _nofollow, nofolow or no-follow is not read as nofollow, so search engines see an ordinary followed link. A misspelled noreferer has a similar effect: the browser still sends the Referer header to the destination. The HTTP header is spelled with one "r", but the keyword is noreferrer.

The validator does not report every unknown token, because rel also accepts extension values defined outside the HTML standard. It warns only when a token is close to a known keyword, and the message ends with the keyword it suspects you meant. When the attribute holds several tokens, the message quotes the whole value, so check each token to find the misspelled one.

A leading underscore is a frequent cause. Keywords for the target attribute start with one (_blank, _self), and the habit carries over to rel on the same link. No rel keyword starts with an underscore.

Invalid example

<a href="https://example.com/" target="_blank" rel="_nofollow">Partner site</a>

<a href="https://example.org/" rel="noreferer">Another site</a>

Valid example

<a href="https://example.com/" target="_blank" rel="nofollow">Partner site</a>

<a href="https://example.org/" rel="noreferrer">Another site</a>

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

HTML does not define the element named in this message, and its name does not qualify as a custom element, so the validator rejects it wherever it appears.

Browsers still show the content of an unknown tag. They treat the tag as a generic inline element with no default styling, no meaning and no accessibility role, so its text renders as if the tag weren't there. The validator reports it because nothing in the HTML standard says what the element is.

The same tag also triggers a second error, Element "X" not allowed as child of element "Y" in this context, and the fix below clears both. The validator writes the element name in lowercase, so <st1:City> is reported as st1:city.

Most unknown elements come from one of these sources:

• A typo in a real element name, such as <buton> or <sectoin>.
• Markup left behind by Microsoft Word when a document is saved as HTML or pasted into an editor. Word adds tags with a namespace prefix: <o:p> around paragraph content, <w:...> for document settings, and "smart tags" like <st1:place>, <st1:city> or <st1:metricconverter> around places, dates and measurements.
• Tag names invented for styling or scripting, such as <tabs> or <icon>, or placeholders from a widget or template engine that were never replaced.

Correct the name if it's a typo. For Word markup, delete the tags and keep the text inside them, since the wrapper does nothing in a browser. Most editors and CMSs have a "paste as plain text" option that keeps this markup out in the first place.

If you need an element of your own, give it a custom element name: lowercase, starting with a letter, and containing a hyphen, such as <unit-converter>. The validator accepts that name, and you can define its behavior with customElements.define().

Invalid example

<p>The table is <st1:metricconverter productid="120 cm">120 cm</st1:metricconverter> wide.</p>

<buton type="button">Add to cart</buton>

Valid example

<p>The table is 120 cm wide.</p>

<button type="button">Add to cart</button>

Valid example with a custom element

<p>The table is <unit-converter value="120" unit="cm">120 cm</unit-converter> wide.</p>

<script>

customElements.define("unit-converter", class extends HTMLElement {});

</script>