What is the Difference Between <b> and <strong>, <i> and <em> Tags

In this snippet, we’re going to explain the differences between the <b> and <strong>, <i> and <em> tags. From the first sight, there isn’t any difference between these tags. But let’s discuss these two pairs separately.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

HTML <b> and <strong> Tags

In HTML5, the <b> and <strong> tags have a different meaning.

The <b> tag highlights in bold a part of the text to make it more obvious for the user. It is a style. It doesn’t convey any additional importance.

So, it’s recommended to use the <b> tag if you need to increase the font-weight of a particular word, phrase, or paragraph only for presentation purposes.

The <strong> tag specifies the strong importance of the content. It can be used to highlight seriousness, urgency, or importance. It indicates how something must be understood.

The difference between these tags is that <b> makes the text look bold only visually, whereas the <strong> tag also gives a semantic emphasize indicating a meaningful word or a text section. A <strong> tag that is used within another <strong> tag has more importance.

The cause of this distinction is that HTML differentiates between semantic (referring to the meaning) and physical (referring to the visual appearance) tags.

HTML <i> and <em> Tags

The <i> tag displays the text in italic. Like the <b> tag, the <i> tag is also used for presentation purposes. It represents some part of a text in an alternate voice or mood or something that indicates a different quality of text.

The <em> tag specifies the stress emphasis of its contents. It can be used for changing the meaning of a sentence. The text within this tag is also displayed in italic.

Overall Differences:

Here's a table comparing the differences between the <b> and <strong> tags, as well as the <i> and <em> tags:

TagMeaningVisual AppearanceAccessibility Implications
<b>Text is stylistically boldBoldNo specific accessibility meaning
<strong>Text is of strong importance or emphasisBoldScreen readers and other assistive technologies recognize the tag as indicating significant content
<i>Text is stylistically italicItalicNo specific accessibility meaning
<em>Text is of emphasis or importanceItalicScreen readers and other assistive technologies recognize the tag as indicating significant content

As you can see, the main difference between the <b> and <strong> tags is their semantic meaning, while the difference between the <i> and <em> tags is also semantic, but related to emphasis rather than importance. Additionally, the <strong> and <em> tags have specific accessibility implications that the <b> and <i> tags do not.

Let’s see examples with each of them.

Example of using the <b> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
  </head>
  <body>
    <p>
      <b>This part of the text </b>
      is highlighted in bold.
    </p>
  </body>
</html>

Result

This part of the text is highlighted in bold.

Example of using the <strong> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>We’ve used the &lt;strong&gt; tag to highlight 
      <strong> this important part of the text</strong>.
    </p>
  </body>
</html>

Example of using the <i> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      Before the end of the month
      <i>it is vital to</i> 
      finish all the work.
    </p>
  </body>
</html>

Example of using the <em> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      The important part of the text is highlighted 
      <em> in italic</em>.
    </p>
  </body>
</html>
The HTML5 specification states that the <b> and <i> tags must be used as a last option when there isn’t another more appropriate tag.