HTML <b> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The <b> tag enables you to make text bold without assigning any extra importance.

Example

<p><b>This is bold</b> and this is not.</p>

This is bold and this is not.

Usage

  • The <b> element is used where you wish to present text or other content as bold, but without attaching any special important to it.
  • If you wish to denote text as being important you should use the <strong> tag, or in the case of headings, a heading tag (<h1>, <h2>, <h3>, <h4>, <h5>, or <h6>).
  • Examples of usage include:
    • Highlighting keywords without making them important
    • Making objects bold to highlight them without attaching importance.
    • Highlighting a lead sentence of paragraph in an article.
      <article>
        <h2>Kittens 'adopted' by pet rabbit</h2>
        <p><b class="lead">Six abandoned kittens have found an
        unexpected new mother figure — a pet rabbit.</b></p>
        <p>Veterinary nurse Melanie Humble took the three-week-old
        kittens to her Aberdeen home.</p>
        [...]
        </article>

Attributes

The <b> element only supports the Global Attributes.

Best Practices

  • According to the HTML5 Specification, the <b> element should be “used as a last resort when no other element is more appropriate”. For example, heading tags, emphasis (<em>), importance (<strong>) or highlighted text (<mark>).

    Google even uses these elements for ranking purposes.

    For example, the following usage would be incorrect:

    <p><b>WARNING!</b> Do not feed the trolls!</p>

  • It is good practice to use a class on the <b> element to more easily style-specific use cases. This will enable you to style a lead paragraph differently from a bolded word should you wish.

  • You should not to use the <b> element for styling. Instead, you can use the CSS font-weight:bold; declaration to create bold text.

    <p><span style="font-weight:bold">WARNING!</span> Do not feed the trolls!</p>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes