# Unclosed element “X”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/unclosed-element-x
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Every non-void HTML element needs a matching end tag. When one is missing, the browser's error recovery kicks in and decides where the element ends. The resulting DOM tree can differ from what the source code suggests, breaking layout, CSS selectors, and JavaScript that depends on a specific structure. Screen readers and other assistive technologies also rely on correct nesting to convey document structure to users.

This error commonly appears when tags are closed out of order. HTML requires last-in-first-out nesting: the most recently opened element must be closed first. Another frequent cause is copy-paste editing that removes a closing tag while leaving the opener behind. Note that void elements (`<br>`, `<img>`, `<input>`, `<meta>`, `<hr>`, `<link>`) never have closing tags. Writing `<br></br>` is invalid in HTML and can trigger a related error.

## Examples

### Missing closing tag

```html
<!-- Bad: the outer <div> is never closed -->
<div class="card">
  <h2>Title</h2>
  <p>Some text</p>
  <div class="footer">
    <p>Footer text</p>
  </div>
```

### Fixed

```html
<div class="card">
  <h2>Title</h2>
  <p>Some text</p>
  <div class="footer">
    <p>Footer text</p>
  </div>
</div>
```

### Out-of-order closing tags

```html
<!-- Bad: <em> is opened inside <strong> but closed after </strong> -->
<p><strong><em>Important</strong></em> notice</p>
```

### Fixed

```html
<p><strong><em>Important</em></strong> notice</p>
```

Consistent indentation makes nesting mismatches easier to spot by eye. Editor features like bracket matching, and tools like Prettier or HTMLHint, can catch these problems before you run the validator. If you use a templating language, make sure conditional blocks do not skip required end tags.