End tag “strong” violates nesting rules.

HTML follows a strict nesting model where elements must be properly contained within one another. When you open a <strong> element and then open another element inside it (such as an <a>, <em>, or <span>), you must close the inner element first before closing </strong>. Closing tags out of order creates overlapping elements, which violates the HTML specification.

This matters for several important reasons. First, browsers must guess how to interpret improperly nested markup, and different browsers may resolve the ambiguity differently, leading to inconsistent rendering. Second, assistive technologies like screen readers rely on a well-formed document tree to convey the correct structure and emphasis to users. Overlapping tags produce a broken DOM tree that can confuse these tools. Third, the WHATWG HTML specification explicitly defines the parsing model as a tree structure — elements cannot partially overlap because a tree node can only have one parent.

The fix is straightforward: always close elements in the reverse order they were opened. Think of it as a “last opened, first closed” rule. If <strong> is opened first and <a> is opened second, then </a> must come before </strong>.

Examples

Incorrect: overlapping tags

The </strong> tag closes before the inner <a> tag, violating nesting rules:

<p><strong><a href="/about">About us</strong></a></p>

Correct: properly nested tags

The <a> element is fully closed before </strong>:

<p><strong><a href="/about">About us</a></strong></p>

Incorrect: multiple nested elements closed out of order

Here <strong> overlaps with both <em> and <a>:

<p><strong><em><a href="#">Learn more</strong></em></a></p>

Correct: closing in reverse order

Each tag is closed in the exact reverse order it was opened:

<p><strong><em><a href="#">Learn more</a></em></strong></p>

Incorrect: strong spanning across block-level boundaries

Sometimes the nesting violation occurs when <strong> wraps across list items or other structures:

<ul>
  <li><strong>First item</li>
  <li>Second item</strong></li>
</ul>

Correct: apply strong within each element individually

Keep <strong> fully contained within each <li>:

<ul>
  <li><strong>First item</strong></li>
  <li><strong>Second item</strong></li>
</ul>

A helpful way to spot these issues is to visually trace your opening and closing tags — if you draw lines connecting each pair, the lines should never cross. If they do, you have a nesting violation that needs to be reordered.

Learn more:

MDN Reference

MDN - strong - The Strong Importance element

→