What is the difference between HTML tags <strong>and <b>and between <em>e <i>?</i></em></b></strong>

Question:

As we already know, the <strong> and <b> tags produce the same visual effect? in HTML documents:

  • bold with <b>
  • bold with <strong> .

The same is true for <em> and <i> , which present italicized text:

  • italics with <i>
  • italics with <em>

But … are there differences between <strong> and <b> as well as between <em> and <i> ?

Is it recommended for any reason to use one or the other according to specific cases?

Answer:

The only difference is the applied semantics, mainly from HTML5, which is important and recommended for accessibility and maybe SEO (even if I can't prove this).

See <strong> .

See specification of <b> .

See specification of <em> .

See specification of <i> .


Basically, <strong> should be used when emphasizing a text, for example, something that should be read aloud, so that the readers (or listeners) are aware of it.

<b> should be used for visual purposes only, if the text between these tags is not necessarily more important or does not require more emphasis than the rest, but we want it to be bold for whatever reason, then it is the appropriate tag.


The same happens with <em> and <i> , with <em> the element that adds the semantic touch, and <i> the element that adds the visual aspect only.


<strong> and <em> apply different types of emphasis, being (as of HTML5) <strong> an emphasis or strong importance and <em> an emphasis that establishes a particular aspect of a phrase, such as a foreignness or a translation.

Scroll to Top