HTML Guides for unexpected end tag

When the HTML parser reaches a </li> closing tag, it expects all elements nested within that list item to already be closed. If any child element remains open, the browser must guess where to close it, which can lead to an unexpected DOM structure. This error typically occurs when a closing tag is accidentally omitted, misspelled, or placed in the wrong order.

This matters for several reasons. First, browsers may interpret the intended structure differently, causing inconsistent rendering across platforms. Second, assistive technologies like screen readers rely on a well-formed DOM to convey content correctly — unclosed elements can confuse the reading order or grouping of content. Third, unclosed elements can cascade into other validation errors, making it harder to identify the real problems in your markup.

Common causes of this error include:

• Forgetting to close an inline element like <span>, <a>, <strong>, or <em> inside a list item.
• Forgetting to close a block-level element like <div> or <p> inside a list item.
• Nesting elements in the wrong order, so closing tags don’t match their opening tags.
• Typos in closing tags (e.g., </sapn> instead of </span>).

To fix the issue, locate the <li> mentioned in the error and check every element opened inside it. Make sure each one has a corresponding, correctly spelled closing tag, and that they are closed in the reverse order they were opened (last opened, first closed).

Examples

Missing closing tag on an inline element

❌ Invalid: The <span> is never closed before </li>.

<ul>
  <li>
    <span>Example text
  </li>
</ul>

✅ Valid: The <span> is properly closed.

<ul>
  <li>
    <span>Example text</span>
  </li>
</ul>

Missing closing tag on a link

❌ Invalid: The <a> element is left open.

<ul>
  <li>
    <a href="/about">About us
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

✅ Valid: Both <a> elements are closed before their parent </li>.

<ul>
  <li>
    <a href="/about">About us</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

Multiple unclosed nested elements

❌ Invalid: Both <strong> and <a> are left open inside the <li>.

<ol>
  <li>
    <a href="/sale"><strong>Big sale
  </li>
</ol>

✅ Valid: Nested elements are closed in reverse order (innermost first).

<ol>
  <li>
    <a href="/sale"><strong>Big sale</strong></a>
  </li>
</ol>

Misspelled closing tag

❌ Invalid: The closing tag </sapn> doesn’t match <span>, so the <span> remains open.

<ul>
  <li>
    <span>Item one</sapn>
  </li>
</ul>

✅ Valid: The closing tag is spelled correctly.

<ul>
  <li>
    <span>Item one</span>
  </li>
</ul>

Incorrectly ordered closing tags

❌ Invalid: The </em> and </strong> tags are closed in the wrong order, leaving <em> effectively unclosed when </strong> is reached.

<ul>
  <li>
    <strong><em>Important note</strong></em>
  </li>
</ul>

✅ Valid: Closing tags are in the correct reverse order.

<ul>
  <li>
    <strong><em>Important note</em></strong>
  </li>
</ul>

HTML follows a strict nesting model where elements must be closed in last-in, first-out (LIFO) order. Think of it like stacking boxes: you must close the innermost box before you can close the one containing it. When you write </li> but a <span> inside that <li> is still open, the browser sees a conflict — you’re trying to close the outer element while an inner element is dangling.

This error typically occurs due to one of these situations:

• A missing closing tag for a nested element (e.g., forgetting </span> inside a <li>).
• Misordered closing tags where you accidentally close elements in the wrong sequence.
• Typos in tag names where the intended closing tag doesn’t match the opening tag, leaving the real element unclosed.

While browsers use error-recovery algorithms to guess what you meant, different browsers may handle malformed nesting differently. This can lead to inconsistent rendering, broken styles, and unexpected DOM structures. Screen readers and other assistive technologies rely on a well-formed DOM tree, so broken nesting can also cause accessibility issues. Keeping your HTML properly nested ensures predictable behavior across all browsers and tools.

How to fix it

1. Locate the line referenced in the validator error. It will tell you which closing tag was seen and which elements were still open.
2. Trace backward from the closing tag to find the unclosed element.
3. Add the missing closing tag in the correct position, or reorder closing tags so they mirror the opening tags in reverse.
4. Re-validate to confirm the fix, since one nesting error can cascade into multiple warnings.

Examples

❌ Missing closing tag for a nested element

<ul>
  <li><span>Item one</li>
  <li>Item two</li>
</ul>

The <span> inside the first <li> is never closed. The validator sees </li> but <span> is still open.

✅ Fixed: close the inner element first

<ul>
  <li><span>Item one</span></li>
  <li>Item two</li>
</ul>

❌ Misordered closing tags

<p>This is <strong><em>important</strong></em> text.</p>

Here </strong> appears before </em>, but <em> was opened inside <strong>, so <em> must close first.

✅ Fixed: close tags in reverse order

<p>This is <strong><em>important</em></strong> text.</p>

❌ Multiple levels of broken nesting

<div>
  <section>
    <p>Hello <a href="/">world</p>
  </section>
</div>

The <a> element is never closed. The </p> tag is encountered while <a> is still open.

✅ Fixed: close the anchor before the paragraph

<div>
  <section>
    <p>Hello <a href="/">world</a></p>
  </section>
</div>

❌ Typo in a closing tag causing a mismatch

<p>Click <a href="/help">here</b> for help.</p>

The closing </b> doesn’t match the opening <a>, so the <a> element remains open when </p> is reached.

✅ Fixed: use the correct closing tag

<p>Click <a href="/help">here</a> for help.</p>

A helpful way to avoid this error is to visualize your HTML as an outline — every level of indentation represents a nesting level, and closing tags should “unwind” in exact reverse order. Many code editors also offer bracket and tag matching features that highlight mismatched or unclosed tags in real time.

The HTML specification defines <p> as an element that can only contain phrasing content — essentially inline elements like <span>, <a>, <strong>, <em>, and text. When the parser encounters a block-level element (such as <div>, <ul>, <ol>, <table>, <blockquote>, or another <p>) inside a <p>, it automatically closes the <p> element before the block-level element. This implicit closure means that a </p> tag appearing after the block-level element has no matching open <p> to close.

Understanding this behavior is important because it can lead to unexpected DOM structures. Browsers will still render the page, but the actual DOM tree may differ from what you intended, potentially affecting CSS styling and JavaScript DOM manipulation. It also signals structural problems in your markup that can hurt accessibility, since assistive technologies rely on a well-formed document tree.

There are three common causes of this error:

1. Duplicate closing tags — A simple typo where </p> appears twice.
2. Block-level elements inside <p> — Nesting a <div>, <ul>, <table>, or similar element inside a paragraph causes the browser to implicitly close the <p> before the block element, leaving the explicit </p> orphaned.
3. Mismatched or misordered tags — Other nesting errors that leave a </p> without a corresponding opening tag.

Examples

Duplicate closing tag

The simplest case — an extra </p> with no matching opening tag:

<!-- ❌ Bad: duplicate end tag -->

<p>Some text.</p></p>

<!-- ✅ Good: single end tag -->

<p>Some text.</p>

Block-level element nested inside a paragraph

This is the most common and least obvious cause. When a <div> (or other block-level element) appears inside a <p>, the parser closes the <p> implicitly:

<!-- ❌ Bad: div inside p causes implicit closure -->

<p>
  Some introductory text.
  <div class="highlight">Highlighted content</div>
</p>

The parser interprets this as:

<p>Some introductory text.</p>
<div class="highlight">Highlighted content</div>
</p>  ← orphaned end tag, triggers the error

To fix this, either replace the outer <p> with a <div>, or replace the inner <div> with a <span>:

<!-- ✅ Good: use div as the outer container -->

<div>
  <p>Some introductory text.</p>
  <div class="highlight">Highlighted content</div>
</div>

<!-- ✅ Good: use span instead of div for inline styling -->

<p>
  Some introductory text.
  <span class="highlight">Highlighted content</span>
</p>

List nested inside a paragraph

Lists are block-level elements and cannot be nested inside <p>:

<!-- ❌ Bad: ul inside p -->

<p>
  Choose one of the following:
  <ul>
    <li>Option A</li>
    <li>Option B</li>
  </ul>
</p>

<!-- ✅ Good: separate the paragraph and list -->

<p>Choose one of the following:</p>
<ul>
  <li>Option A</li>
  <li>Option B</li>
</ul>

Orphaned end tag from a deleted opening tag

Sometimes during editing, the opening <p> gets accidentally removed:

<!-- ❌ Bad: missing opening tag -->

<div>
  Some text that lost its opening tag.
</p>
</div>

<!-- ✅ Good: restore the opening tag or remove the closing tag -->

<div>
  <p>Some text with its opening tag restored.</p>
</div>

When debugging this error, look at the line number reported by the validator and trace backward. If you see a </p> on that line, check whether there’s a valid opening <p> for it, and verify that no block-level elements between the opening and closing tags could have caused an implicit closure.

When the W3C HTML Validator reports “No X element in scope but a X end tag seen,” it means the parser encountered a closing tag for an element that was never opened, or that was already closed. The validator tracks which elements are currently “in scope” — meaning which opening tags are still waiting for their corresponding closing tags. When a closing tag appears that doesn’t match any open element in scope, this error is raised.

This issue matters for several reasons. First, it indicates malformed HTML that browsers must guess how to interpret, potentially leading to inconsistent rendering across different browsers. Second, broken document structure can confuse assistive technologies like screen readers, harming accessibility. Third, stray end tags can inadvertently affect the DOM tree in unexpected ways, making your CSS and JavaScript behave unpredictably.

There are several common causes:

• Closing a tag twice — the most frequent cause, where a copy-paste error or oversight leads to a duplicate closing tag.
• Missing the opening tag — the corresponding opening tag was accidentally deleted or never added.
• Misnested tags — elements overlap instead of being properly nested, causing the browser to auto-close one element, which makes a later closing tag orphaned.
• Typos in tag names — an opening tag has a different name than the closing tag (e.g., <div> opened but </dvi> used to close it, though this usually triggers a different error).

To fix this, carefully review the HTML around the flagged line. Trace each closing tag back to its opening tag. Using a code editor with bracket/tag matching can make this much easier. Remove any duplicate end tags, add any missing opening tags, or fix nesting order as needed.

Examples

Closing a tag twice

This is the most common cause. The </p> tag appears twice:

<!-- ❌ Bad: duplicate closing tag -->

<p>Hello world</p></p>

Remove the extra closing tag:

<!-- ✅ Good -->

<p>Hello world</p>

Missing opening tag

Here a </span> end tag has no corresponding <span>:

<!-- ❌ Bad: no opening <span> -->

<div>
  Some text</span>
</div>

Either add the missing opening tag or remove the stray end tag:

<!-- ✅ Good: opening tag added -->

<div>
  <span>Some text</span>
</div>

Misnested tags

When elements overlap instead of nesting properly, the browser auto-closes the inner element, leaving a later closing tag orphaned:

<!-- ❌ Bad: <b> and <i> overlap -->

<p><b>Bold and <i>italic</b> text</i></p>

In this case, the browser closes the <i> when it encounters </b> (since <i> is inside <b>), so the later </i> has no element in scope. Fix it by nesting correctly:

<!-- ✅ Good: proper nesting -->

<p><b>Bold and <i>italic</i></b> <i>text</i></p>

Stray end tag after auto-closed element

Some elements like <p> are automatically closed by certain subsequent tags. This can lead to orphaned end tags:

<!-- ❌ Bad: <p> is auto-closed by <div>, leaving </p> orphaned -->

<p>Some text
  <div>A block element</div>
</p>

The <p> element cannot contain a <div>, so the browser implicitly closes the <p> before the <div>. The final </p> then has no <p> in scope. Restructure the markup:

<!-- ✅ Good: separate elements -->

<p>Some text</p>
<div>A block element</div>

Tip: use editor tooling

Most modern code editors can highlight matching opening and closing tags. If you see a closing tag without a highlighted match, that’s likely the source of this error. Extensions for VS Code, Sublime Text, and other editors can also auto-format and validate your HTML as you type, catching these issues early.