HTML Guides for u

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. 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

<p>

<u><b>Shipping details</u></b>

</p>

Valid example

<p>

<u><b>Shipping details</b></u>

</p>