HTML Guides for em

HTML requires elements to be properly nested, meaning you must close child elements before closing their parent elements. When an </em> end tag appears in the wrong place — such as before an inner element has been closed, or after an outer element has already been closed — the browser encounters overlapping tags that violate the HTML specification. This is sometimes called “tag soup.”

Browsers attempt to recover from overlapping tags, but the way they do so is unpredictable and may not match your intent. One browser might auto-close the inner element, while another might restructure the DOM differently. This can lead to inconsistent rendering, broken styles, and unexpected behavior across browsers. It also creates problems for assistive technologies like screen readers, which rely on a well-formed document tree to convey meaning to users.

The nesting rule is straightforward: elements must close in the reverse order they were opened. If you open <em> and then open <a>, you must close </a> first, then </em>. Think of it like stacking boxes — you can’t remove a box from the bottom without first removing the one on top.

This issue can also arise when <em> is used across block-level boundaries. For example, wrapping <em> around multiple <p> elements or closing </em> inside a <div> when it was opened outside of it will also trigger this error.

Examples

Overlapping with an inline element

The </em> tag closes before the nested <a> tag, creating overlapping elements:

<!-- ❌ Wrong: <em> closes before <a> -->

<p><em><a href="#">link</em></a></p>

Close the inner <a> element first, then the outer <em>:

<!-- ✅ Correct: tags close in reverse order -->

<p><em><a href="#">link</a></em></p>

Overlapping with a block-level element

The <em> element spans across a <p> boundary, which is not allowed:

<!-- ❌ Wrong: <em> opened in one <p> and closed in another -->

<p>This is <em>emphasized text</p>
<p>that continues here</em> in a new paragraph.</p>

Apply <em> separately within each <p> element:

<!-- ✅ Correct: <em> is properly contained within each <p> -->

<p>This is <em>emphasized text</em></p>
<p><em>that continues here</em> in a new paragraph.</p>

Multiple levels of nesting

With deeply nested elements, every tag must still close in strict reverse order:

<!-- ❌ Wrong: </em> closes before </strong> -->

<p><em><strong>bold and italic</em></strong></p>

<!-- ✅ Correct: </strong> closes first, then </em> -->

<p><em><strong>bold and italic</strong></em></p>

<em> crossing a <div> boundary

<!-- ❌ Wrong: <em> opened outside <div>, closed inside -->

<em>
<div>
  <p>Some content</p>
</em>
</div>

Keep the <em> element entirely inside or outside the block element:

<!-- ✅ Correct: <em> is fully contained within the <div> -->

<div>
  <p><em>Some content</em></p>
</div>

How to spot and fix these errors

1. Read the error message carefully. The W3C validator usually tells you which line the problem is on and which tags are involved.
2. Match every opening tag with its closing tag. Trace through the nesting to make sure each pair is properly contained within its parent.
3. Use consistent indentation. Properly indented code makes nesting issues much easier to see at a glance.
4. Check for copy-paste errors. Overlapping tags often sneak in when code is moved between elements without updating the surrounding tags.