HTML Guides for b

HTML follows strict nesting rules: when one element is opened inside another, the inner element must be closed before the outer one. This is sometimes called the “last opened, first closed” principle. When a </b> end tag appears while another element that was opened inside the <b> is still open, the validator reports this nesting violation.

This matters for several reasons. First, browsers must guess what you intended when they encounter improperly nested tags, and different browsers may interpret the structure differently, leading to inconsistent rendering. Second, assistive technologies like screen readers rely on a well-formed DOM tree to convey the correct meaning and structure of content to users. Misnested tags can produce a confusing or broken experience. Third, improperly nested elements can cause unexpected behavior with CSS styling, since the computed DOM tree may not match what you wrote in your source code.

The fix is straightforward: always close elements in the exact reverse order you opened them. If <b> is opened first and <a> is opened second, then </a> must come before </b>.

Examples

Incorrect: <b> closed before a nested <a>

<p><b><a href="/about">About us</b></a></p>

Here, the <a> element was opened inside the <b>, but </b> appears before </a>. This violates the nesting rules.

Correct: inner element closed first

<p><b><a href="/about">About us</a></b></p>

The <a> is closed first, then the <b>, respecting the order in which they were opened.

Incorrect: multiple nesting violations

<p><b><em><a href="#">Click here</b></em></a></p>

Three elements are opened (<b>, then <em>, then <a>), but they are closed in the wrong order.

Correct: proper reverse-order closing

<p><b><em><a href="#">Click here</a></em></b></p>

The elements close in reverse order: </a> first, then </em>, then </b>.

Incorrect: <b> overlapping with a block-level element

<b><p>Bold paragraph</b></p>

Beyond the nesting order issue, note that <b> is a phrasing (inline) element and should not wrap <p> (a flow/block element). This is a separate but related violation.

Correct: <b> inside the paragraph

<p><b>Bold paragraph</b></p>

The <b> element is now properly placed inside the <p>, and the nesting order is correct.

A helpful mental model

Think of HTML nesting like parentheses in math. Every opening must have a corresponding close, and they cannot cross:

Wrong:  ( [ ) ]
Right:  ( [ ] )

Translating to HTML:

<!-- Wrong -->

<b><em>text</b></em>

<!-- Right -->

<b><em>text</em></b>

If you are working with complex or deeply nested markup, using a code editor with auto-closing tags and bracket matching can help you spot these issues before they reach the validator.