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.

A <b> element without an explicit role has the generic role, and generic elements can't have an accessible name, so aria-label is not allowed on it.

ARIA forbids naming elements with the roles listed in the message. Screen readers often skip an aria-label on these elements, and users never hear it. Setting role="generic" or role="presentation" on the <b> doesn't help either, because both roles are in the list.

The usual cause is a <b> used as a clickable icon, such as the "×" that closes a notice. Keyboard users can't tab to a <b>, and screen readers don't announce it as a button. Replace it with <button type="button">, which takes aria-label, receives focus, and runs its click handler when the user presses Enter or Space.

Adding aria-hidden="true" doesn't clear the message. The validator still flags the aria-label, and nobody hears the label of a hidden element anyway. For a purely decorative <b>, keep aria-hidden="true" and delete aria-label. If the <b> is a symbol that means something by itself, like an asterisk that marks a required field, role="img" makes the label valid. For ordinary bold text, remove aria-label and reword the visible text if it isn't clear enough on its own.

Invalid example

<div class="alert" role="status">

<p>Your changes have been saved.</p>

<b class="alert-close" aria-label="Dismiss message" onclick="this.parentElement.hidden = true">&times;</b>

</div>

Valid example

<div class="alert" role="status">

<p>Your changes have been saved.</p>

<button type="button" class="alert-close" aria-label="Dismiss message" onclick="this.parentElement.hidden = true">&times;</button>

</div>

The name attribute is not a valid attribute for the <b> element in HTML.

<b> only takes the global attributes, and name is not one of them. HTML defines name on a handful of elements, mostly form controls, <form>, <iframe> and <meta>. The validator reports it twice on <b>: this warning, and an error saying that the attribute is not allowed on b at this point. Removing the attribute clears both.

name on <b> is often left over from an old anchor pattern. <a name="..."> used to mark a spot that links could jump to, and people copied the attribute onto other elements. It doesn't work there. To resolve a fragment such as #shipping, browsers look for an element with that id, and the only name they check is the one on <a>. So a link to #shipping won't scroll to <b name="shipping">.

Change name to id and the link works, as long as the value is unique on the page. If the value is only there for scripts, put it in a data-* attribute such as data-name, and update any script that finds the element with document.getElementsByName() to use getElementById() or a [data-name] selector.

Invalid example

<p><a href="#shipping">Shipping costs</a></p>

<p><b name="shipping">Shipping</b> is free on orders over 50 euros.</p>

Valid example

<p><a href="#shipping">Shipping costs</a></p>

<p><b id="shipping">Shipping</b> is free on orders over 50 euros.</p>