In this article, we are going to learn how to use the <b> tag and how it differs from the <strong> tag.

What is the <b> (bold) tag in HTML?

The <b> tag is used to to make a portion of the text bold without carrying any special importance. Here is an example using the <b> tag.

<p>This is an example of <b>bold text.</b></p>
bold-text

According to the HTML Living Standard, the <b> tag can be used with the following examples:

key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

Here's an example of using <b> for a product name in a review

<p>The <b>Sennheiser IE 300 Headphones</b> fit well in your ears and have an incredible sound.</p>
headphones-bold-text-1

The <b> tag is meant to bring the user's attention to a span of text. It is not supposed to carry any importance or convey a tone of urgency or seriousness.

This would be an incorrect use of the <b> tag.

<p><b>WARNING!!</b> This area is dangerous.</p>

The appropriate tag for this situation would be the <strong> tag because it conveys a sense of seriousness.

Differences between the <b> tag and <strong> tag in HTML

When I first started learning HTML, I thought that the <b> tag and <strong> tag were the same thing. Part of the confusion is that they both have the same default boldface styling in most browsers.

One key difference is that <strong> tags should be used when the text has strong importance, or a sense of urgency or seriousness. <b> tags, on the other hand, should be used to bring attention to a span of text without increased importance.

This example of the <strong> tag tells the user what list item should be read first and that it holds more importance than the other two list items.

<p>To do list for Monday:</p>
<ul>
    <li><p><strong>Pay rent.</strong></p></li>
    <li><p>Start term paper.</p></li>
    <li><p>Go grocery shopping.</p></li>
</ul>
to-do-list-

Another key difference is that <b> tags should not be used in headings and captions whereas <strong> tags can.

Here is an example using the <strong> tag to place importance on the title of the chapter.

<h1>Chapter 5: <strong>The Battle</strong></h1>

How to Use the Class Attribute with <b> Tags in HTML

It is common to add a class attribute in the <b> tag to add more semantic meaning.

If you have a series of  sentences, you can add a class like this <b class="lead"> to the first <p> tag and that will mark it as the lead sentence.   

<article>
    <h2>A young boy reunites with birth mother</h2>
    <p><b class="lead">A six year old boy unexpectedly meets his birth mother at the local grocery store.</b></p>
    <p>A young boy and his grandfather were shopping at the grocery store, when a young woman approached them from behind.</p>
    [...]
</article>

Should you use the <b> tag for styling text in HTML?

In HTML 5, it is not appropriate to use the <b> tag for styling text. The preferred styling method is to use the CSS font-weight property.

Example using the keyword of bold

 <p class="demo-para">I am using CSS to make the text bold.</p>

.demo-para {
  font-weight: bold;
}

Example using numeric values

.demo-para {
  font-weight: 700;
}
using-font-weight

Conclusion

While, <b> tags and <strong> tags might look similar in the browser, they do have different meanings. It is important to know the difference between the two so you can use them appropriately.

<b> tags are used to bring attention to a span of text but hold no special importance. <strong> tags on the other hand, should be used if the text conveys a sense of importance, seriousness, or urgency.

I hope you enjoyed this article and learned about when to use <b> tags.