Published on

Understanding the Difference Between <b> and <strong>

Authors

Have you ever wondered if you should use <b> or <strong>? Or have you wasted time googling to see which one is the most suitable? So I will save your time and share with you the formula that made me understand when to use and when not to use these HTML elements.

When to use the <b> (Bring Attention To) element

The <b> element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as keywords in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede. - HTML Living Standard

The HTML Bring Attention To element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. Historically, the <b> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of this element has been changed.

Example:

<p>
  The most expensive music videos in history are
  <b class="song-title">Scream</b> by Michael Jackson and Janet Jackson, and
  <b class="song-title">Die Another Day</b> by Madonna.
</p>

Tip: Imagine you are on a phone call, will you change the tone of your voice to emphasize the songs name in the example above? No, of course not. It's the same experience that a screen reader user will have because they don't need to hear these words emphasized if it doesn't have a strong emphasis on the phrase.

When to use the <strong> (Strong) element

The strong element represents strong importance, seriousness, or urgency for its contents. The strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. - HTML Living Standard

Examples:

Seriousness: the strong element can be used to mark up a warning or caution notice.

<p>
  ... the most important rule, the rule you can never forget,
  no matter how much he cries, no matter how much he begs:
  <strong>never feed him after midnight</strong>.
</p>

Urgency: the strong element can be used to denote contents that the user needs to see sooner than other parts of the document.

<p>
  <strong>Preheat the oven for 10 minutes at 180°</strong>.
  Mix all ingredients in a blender.
  Place in a greased pan, and bake for 30 minutes.
</p>

When don't use any

There are some cases where you shouldn't use any of the elements mentioned above:

  • If there is no semantic purpose to using the <b> element, you should use the CSS font-weight property with the value "bold" instead of making text bold.
  • Don't mark titles and headings using the <b> element. For this purpose, use the <h1> to <h6> tags.
  • The <b> element should be used as a last resort when no other element is more appropriate. In particular, stress emphasis should use the <em> element, importance should be denoted with the <strong> element, and text marked or highlighted should use the <mark> element.

References:

After these tips and examples, you will never again be googling the difference between <b> and <strong> and will be able to develop semantic HTML that will help screen reader users to really understand the importance you want to give to words and phrases.

Happy coding!

Cheers,

Discuss on Twitter • View on GitHub