Unclosed element “span”.

The <span> element is an inline container used to mark up a portion of text or a group of inline elements, typically for styling or scripting purposes. Like most HTML elements, it requires both an opening <span> tag and a closing </span> tag. When the closing tag is missing, the browser’s HTML parser must determine where the element ends on its own. Different browsers may handle this differently, potentially wrapping more content inside the <span> than intended.

This is problematic for several reasons:

• Unexpected styling: If the <span> has CSS applied to it (via a class, id, or inline style), the styles may bleed into sibling or subsequent elements that were never meant to be affected.
• Broken document structure: An unclosed <span> inside a <p> element can cause the parser to implicitly close and reopen elements in unexpected ways, distorting the DOM tree.
• Accessibility concerns: Screen readers and assistive technologies rely on a well-formed DOM. An unclosed element can cause content to be grouped or announced incorrectly.
• Maintenance difficulty: Unclosed elements make the markup harder to read, debug, and maintain over time.

A common scenario is forgetting the closing tag when the <span> wraps only part of a paragraph’s text. Another frequent cause is mismatched or misordered nesting, where the closing tags appear in the wrong sequence.

Examples

Unclosed <span> inside a paragraph

The closing </span> is missing entirely, so the browser has to guess where the span ends:

<!-- ❌ Bad: unclosed <span> -->

<p><span class="highlight">I'm forgetting something</p>
<p>Life goes on</p>

Add the missing </span> before the content that shouldn’t be wrapped:

<!-- ✅ Good: <span> is properly closed -->

<p><span class="highlight">I'm forgetting something</span></p>
<p>Life goes on</p>

Incorrectly nested closing tags

Sometimes the closing tags are present but in the wrong order. Tags must be closed in the reverse order they were opened:

<!-- ❌ Bad: closing tags are misordered -->

<p><em><span class="note">Important text</em></span></p>

<!-- ✅ Good: tags closed in correct (reverse) order -->

<p><em><span class="note">Important text</span></em></p>

Multiple <span> elements with a missing close

When using several <span> elements in sequence, it’s easy to lose track:

<!-- ❌ Bad: second <span> is never closed -->

<p>
  <span class="first-name">Jane</span>
  <span class="last-name">Doe
</p>

<!-- ✅ Good: all <span> elements are closed -->

<p>
  <span class="first-name">Jane</span>
  <span class="last-name">Doe</span>
</p>

Tips for avoiding unclosed elements

• Indent consistently. Proper indentation makes it much easier to spot a missing closing tag.
• Write both tags at once. When you type <span>, immediately type </span> and then fill in the content between them.
• Use an editor with auto-closing and bracket matching. Most modern code editors will highlight unmatched tags.
• Validate regularly. Run your markup through the W3C HTML Validator often, especially after larger edits.

Learn more:

MDN Reference

HTML span element

→

WHATWG Spec

HTML syntax - optional and required closing tags

→