HTML Guide

A <div> tag has been found as a direct child of an <ul> tag, and this is not allowed. For example, <ul><div><li>item</li></div></ul> is not valid, but <ul><li><div>item</div></li></ul> is valid as the direct child of <ul> is <li>.

The element X is not allowed as a child element of Y. For example, a <ul> element cannot have a <div> child element.

An </a> end tag has been found to violate nesting rules. <a> tags can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:

<a href="one.html">Page 1
<a href="two.html">Page 2</a>

An end tag </b> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:

<!-- This line is incorrect as the <b> tag was closed before the nested <a> tag -->

<b><a href="#">link</b></a>

<!-- This line is OK as every end tag respects the nesting rules -->

<b><a href="#">link</a></b>

An end tag </code> has been found violating nesting rules. Check other errors in the same document related to the <code> element, and fix the unallowed nested elements.

End tag “i” violates nesting rules because the closing </i> does not match the most recently opened still-unclosed inline element, causing mis-nested tags.

HTML requires elements to be properly nested in a stack-like order: last opened, first closed. Inline elements like the i element (for idiomatic text), em, strong, a, and span must not overlap. When you open i and then open b, you must close b before closing i. Mis-nesting often happens around links or emphasis tags, e.g., i inside a but closed outside. The i element is purely presentational/idiomatic; consider em for emphasis or CSS with font-style: italic;, but whichever you use, keep the nesting consistent.

Common patterns that trigger the error:

• Overlapping inline elements: i … b … </i> … </b>
• Closing order mismatch across a, span, em, strong, i
• Copy/paste around icons or screen-reader text

Fix by reordering the tags so they close in reverse order of opening, or by merging styles into one element to avoid overlaps.

HTML Examples

Incorrect (reproduces the validator error)

<p>
  <a href="/about"><i>About <strong>Us</i></strong></a>
</p>

Correct (properly nested)

<p>
  <a href="/about"><i>About <strong>Us</strong></i></a>
</p>

An end tag </strong> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:

<!-- This line is incorrect as the <strong> tag was closed before the nested <a> tag -->

<strong><a href="#">link</strong></a>

<!-- This line is OK as every end tag respects the nesting rules -->

<strong><a href="#">link</a></strong>

A heading element (h1, h2, h3, etc.) can’t be nested inside another heading element.

Here’s an example of invalid HTML code:

<h1>Main heading
  <h2>Sub heading</h2>
</h1>

To fix this issue, you should ensure that each heading element is properly nested within the document hierarchy. Headings should only be used to indicate the structure of your content, not to style it.

Here’s an example of valid HTML code that properly uses heading elements:

<main>
  <h1>Main heading</h1>
  <section>
    <h2>Section heading</h2>
    <p>Paragraph content</p>
  </section>
</main>

In this example, the heading elements are used to denote the structure of the document, with the h1 element indicating the highest level heading and the h2 element indicating a subheading within a section. Notice that in the valid example, each heading element is only used once and is not nested within another heading element.

Some times this can be caused by a typo in the end tag for a heading, for example:

<h3>Meet the Feebles<h3>

In order to fix this issue, the end tag should be </h3> in the example above.

Nested comments are not allowed in HTML. When you place an opening comment tag <!-- within an existing comment, it causes a parsing error.

To fix this issue, you should avoid nesting comments. If you need to include multiple comments in your HTML code, you can separate them or consider alternative ways to convey the information without nested comments.

Here’s an example of a nested comments, which is not allowed in HTML:

<!-- This is a valid comment -->

<!-- This <!-- is not allowed -->
 nested comment -->

To fix the nested comment issue, you can rewrite the comments like this:

<!-- This is a valid comment -->

<!-- Avoid nesting comments and provide comments separately -->

<!-- Another comment here -->
 

An <a> tag can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:

<a href="one.html">Page 1
<a href="two.html">Page 2</a>