What’s the Difference Between <strong> and <b> in HTML?

Bold (aka boldface) is considered a strong type of emphasis in typography. In modern HTML there are two HTML elements that by default apply a bold font-weight (also called “boldface”) to a text element (in most browsers).

You can either use a <strong> tag or a <b> tag, like this:

<p>The strong tag is used to <strong>emphasize</strong> text.</p>

<p>The b tag is used to <b>emphasize</b> text.</p>

In modern HTML (HTML5), both <strong> and <b> are considered semantic and valid. Although they both get the same boldface presentational styling in modern browsers, they don’t have the same meaning or purpose.

So what’s the difference between using strong and b, and which one should you use for what?

• The <strong> element is used for content of great importance (like warnings).
• The <b> element is used to draw attention, without suggesting importance.

An example of using <b>:

The Spanish word <b>idioma</b> means “language”. It originates from Greek.

In the example above, I, as a typographer, decide to highlight the word idioma not because it has great importance, but because it’s a foreign, non-English word that I want to stand out from the surrounding text. It’s more of a style-decision, rather than something I must do to convey meaning.

So if you want to draw attention to something, without a specific semantic meaning behind it, <b> would historically (before HTML5) be correct to use. That said, in modern times, we don’t use HTML for presentation, we use CSS, which is why I don’t use <b>

An example of using <strong>:

In 2020, <strong>security</strong> and <strong>performance</strong> are are
crucial for your SEO.

In the example above, I decided to strongly emphasize security and performance because those topics indeed have great importance for your website’s SEO (and UX).

By default, <strong> and <b> will apply the same boldface styling to text in most browsers, which understandably causes a lot of confusion. Why make them look the same when they’re different tools for different use cases?

I agree with you. It’s annoying.

This is why you might want to override the browser defaults and apply different styling to them.

A good way to differenciate between <strong> and <b> presentationally, is to apply a font weight of 500 to 900 (depending on the font family) to your <strong> element with CSS. Like this:

strong {
  font-weight: 700;
}

And then use a different styling for <b>, such as:

b {
  font-weight: 400;
  color: green;
}

The above is not a style suggestion, but an example of how you can make it easier for you to remember which one you have used when viewing rendered pages in your browser.

If you’re using markdown

If you try to convert either <b> or <strong> to markdown in an HTML to Markdown converter like Browserling you’ll notice that they both get the same ** ** — which gets rendered to <strong> in the browser.

So what gives?

I’m not sure. I can’t find any markdown guide that shows how to render <b> to the browser when using markdown, at least not by using markdown syntax.

Don’t worry, you can still apply HTML syntax directly inside markdown files (unless you’re using an old version). So if you want or need to use <b> instead of <strong>, you can simply add it like this:

Here is a line of text inside a <b>markdown</b> file which automatically gets wrapped by paragraph tags

I’m writing this tutorial in markdown. Now I’m going to highlight this text with the <b> element. If you mark and select this paragraph and click “Inspect” you’ll see that it indeed uses the <b> element.

Does it really matter that much which you use?

It’s clearly not a life or death issue, or modern browsers wouldn’t render <b> and <strong> with the same boldface styling.

However, semantically, there is a difference, which is the message I wanted to get across. So if you’re going to a job interview, where they care a lot about semantic markup, it’s important to know the difference.

In summary:

• <b> is used to draw attention to specific text.
• <strong> is used for important text.
• When in doubt, use <strong>.

A good rule of thumb is to avoid abusing emphasis altogether. When you try to emphasize too much, emphasis loses its power. If you emphasize everything you emphasize nothing (I’m looking at you, generic marketing landing page sites).