Kieran Barker

The difference between strong and b

Two days ago, I wrote about the difference between the <em> and <i> elements. The next elements we'll examine are <strong> and <b>.

If you only want boldface for presentation, you should not use these elements. You should use the CSS font-weight property instead.

If there's an actual semantic reason for your use of boldface, read on to learn which element you should use.

The 'strong importance' element

The MDN Web Docs state that:

The HTML Strong Importance Element (<strong>) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

Some examples:

<p><strong>Citizens must remain 2 metres apart</strong> during the COVID-19 pandemic.</p>

<p>Before handling bleach, <strong>you must wear protective gloves</strong>.</p>

<p><strong>You must not smoke</strong> while refuelling your vehicle.</p>
  • Citizens must remain 2 metres apart during the COVID-19 pandemic.
  • Before handling bleach, you must wear protective gloves.
  • You must not smoke while refuelling your vehicle.

The 'bring attention to' element

Here's the definition from the MDN Web Docs:

The HTML Bring Attention To element (<b>) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface.

This very definition would be a good place for the <b> element:

<p>The HTML <b>Bring Attention To element (<code>&lt;b&gt;</code>)</b> is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface.</p>

The emboldened portion isn't especially important, but it is probably worthy of drawing the reader's attention.

Ironically, they've used the <strong> element on the MDN page. 🤦‍♂️

Palpatine, from Star Wars, saying "It's ironic."

Summary

There's a good summary about all this on the MDN page for <strong>:

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <b> or <strong>? Don't they both do the same thing?"

Not exactly. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.

It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS font-weight property.

The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.