# End tag “u” violates nesting rules.

> Canonical HTML version: https://rocketvalidator.com/html-validation/end-tag-u-violates-nesting-rules
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The closing `</u>` tag appears while an element opened inside the `<u>` is still open, so the two elements overlap instead of nesting.

HTML elements form a tree, and the element opened last has to be closed first. In `<u><b>Shipping details</u></b>`, the `<b>` starts inside the `<u>`, but `</u>` comes before `</b>`. The parser can't end the `<u>` without also ending the `<b>`, so it repairs the markup with the [adoption agency algorithm](https://html.spec.whatwg.org/multipage/parsing.html). When text sits between the two end tags, as in `<u><b>Shipping</u> details</b>`, the browser opens a second `<b>` for that text. The DOM then has two `<b>` elements where your source has one, and a CSS rule like `u b` styles only the first.

When nothing sits between the end tags, the leftover `</b>` has nothing to close, and the validator follows this error with a second one saying no `b` element is in scope. Fixing the order clears both.

Close the elements in the reverse order you opened them. If the `<b>` opened inside the `<u>`, the end tags go `</b></u>`.

The `<u>` element is for text with a non-textual annotation, such as a misspelled word. If the underline is only decoration, use CSS `text-decoration: underline` instead, and keep in mind that readers often take underlined text for a link.

## Invalid example

```html
<p>
  <u><b>Shipping details</u></b>
</p>
```

## Valid example

```html
<p>
  <u><b>Shipping details</b></u>
</p>
```
