W3docs
en
Log in

HTML <b> tag

The <b> tag is used to highlight in bold the part of the text, which we want to make more obvious for the user

The HTML <b> tag is used to render a part of the text in bold to make it stand out. The <b> tag only changes the visual appearance; it carries no semantic meaning (including for search engines).

This chapter is for anyone writing HTML who wants to bold text the right way. You will learn what the <b> tag is for in modern HTML, when to reach for it versus CSS, and how it differs from <strong>, <i>, and <em> — four tags that are easy to mix up.

Tip

In HTML5, the <b> tag is intended for non-semantic stylistic emphasis, such as marking keywords, product names, or UI labels, rather than as a fallback for other tags.

When to use the <b> tag

In HTML5 the <b> tag has a specific, narrow purpose: drawing attention to a span of text for purely stylistic reasons, without implying that the text is more important. The HTML specification lists three classic cases:

  • Keywords in a document, for example the first occurrence of a technical term.
  • Product names in a review or description.
  • The lead sentence or opening words of an article paragraph.
<p><b>HTML</b> is the standard markup language for web pages.</p>

<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>

<p><b>In a hurry?</b> Skip to the summary below.</p>

In each case the bold text stands out visually but is not necessarily more important to the meaning of the sentence — that distinction is what separates <b> from <strong>.

Avoid using the <b> tag for titles and headings. Instead, use the <h1>–<h6> tags, which carry document-outline meaning.

<b> or CSS?

If your goal is purely visual and tied to a design rule — for example "all product names in this catalog are bold" — applying bold with the CSS font-weight property is usually the better choice, because the styling lives in your stylesheet and can be changed in one place. Reach for the <b> tag when the bolding is part of the document's content itself (a one-off keyword or lead-in), not a repeatable design pattern. Either way, neither approach conveys importance to assistive technology — for that you need <strong>.

Syntax

The <b> tag comes in pairs. The content is written between the opening ( <b> ) and closing ( </b> ) tags.

Example of the HTML <b> tag:

Example of the HTML <b> tag|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
  </head>
  <body>
    <p><b>This section of the text </b> has been rendered in bold,</p>
  </body>
</html>
Try it Yourself »

The default appearance of the <b> element is bold, but that bold rendering is just the browser's default style — you can change it with CSS.

Bolding text with CSS instead

When the bolding is driven by your design rather than the content, set it with the CSS font-weight property on a <span> (or any element) instead of using <b> ``. This keeps the styling reusable in your stylesheet:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .bold-text {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <p>
      <span class="bold-text">This section of the text </span> 
      has been rendered in bold.
    </p>
  </body>
</html>
Try it Yourself »

<b> vs <strong>

Both the <b> and <strong> elements render text in a bold typeface by default, so they look identical on screen. The difference is in meaning:

  • <strong> marks text of greater importance, seriousness, or urgency — a warning, a critical instruction, the key point of a sentence.
  • <b> simply draws the eye without saying the text matters more — a keyword, a product name, a lead-in.

Here is the same words marked both ways:

<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>

<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>

Rule of thumb: if the bolding means something — this text is more important and a screen-reader user should know it — use <strong> . If you only want a visual cue, use <b> or CSS font-weight.

<b> vs <i> , <em> , and <strong>

These four tags are commonly confused because two of them produce bold and two produce italics. They split along the same line as <b> and <strong> — visual versus semantic:

TagDefault styleConveys importance/emphasis?
<b>BoldNo — visual only
<strong>BoldYes — strong importance
<i>ItalicNo — visual only (alternate voice, terms)
<em>ItalicYes — stress emphasis

So <b> is the bold counterpart of <i>, and <strong> is the bold counterpart of <em>.

Accessibility

Screen readers give the <b> element no semantic role — its text is announced exactly like surrounding text, with no change in emphasis. That is intentional, because <b> is presentational. The practical consequence: never use <b> when the importance of the text must reach assistive-technology users. If a phrase is genuinely more important, mark it with <strong> (or <em> for spoken stress) so that meaning is conveyed to everyone, not just sighted readers.

Attributes

The <b> tag supports Global Attributes and Event Attributes.

How to apply a global attribute to an HTML <b> tag

<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>

Practice

Practice
What does the HTML b tag do?
What does the HTML b tag do?
Was this page helpful?