HTML Guides for em

letter-spacing takes normal or a length such as 0.05em, and the validator rejects anything else, including percentages like 1%.

CSS Text Module Level 4 adds percentages to letter-spacing and resolves them against the font size, so 1% is one hundredth of the font size. Only recent browser versions support this, and the validator's CSS checker doesn't recognize it. A browser without support ignores the declaration, and the text keeps whatever spacing it inherits.

The em unit gives the same result in every browser. 1em is the element's font size, so 1% becomes 0.01em and 5% becomes 0.05em. The spacing still scales with the text.

Made-up keywords such as wide trigger the same message. Use normal to reset the spacing, 0 for no extra space, or a length like 0.05em or 1px. Negative lengths are allowed and pull the letters closer together.

Invalid example

<h1 style="letter-spacing: 1%;">Upcoming events</h1>

Valid example

<h1 style="letter-spacing: 0.01em;">Upcoming events</h1>

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.