HTML Guide
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>Learn more:
Related W3C validator issues
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 </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.
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 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 </em> 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 <em> tag was closed before the nested <a> tag -->
<em><a href="#">link</em></a>
<!-- This line is OK as every end tag respects the nesting rules -->
<em><a href="#">link</a></em>A closing </body> tag has been found, but there are unclosed elements before it. For example this has an unclosed <section> element:
<body>
<section>
</body>End tags in HTML must not have any attributes.
According to the HTML specification, only start tags (also called opening tags) may contain attributes, while end tags must appear as a plain </tagname> with nothing else.
For example, this is invalid and will trigger the error:
<p>Welcome to the site.</p class="welcome">Correct code removes the attribute from the end tag:
<p>Welcome to the site.</p>If you need the element to have an attribute, only include it in the start tag:
<p class="welcome">Welcome to the site.</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>And end tag has been found that does not match the current open element. Check the context to fix the start and end tags.