What is the semantic difference between <em> and <Strong>? Do they replace <i> and <b>?


Viewed 8,505 times


They say the element <em> should be used for emphasis, and the <strong> for even more intense emphases. This seems rather confusing. When and why use each of them? And <i> and <b>, should still be used in any situation? They have been replaced by <em> and <strong>?

  • use <'i'> for italics and <'b'> for bold, ready, finished! :)

  • 11

    This is neither recommended nor answers to what I asked!

  • I wonder, why complicate simple terms? Simple terms, as the name suggests, answer with simple arguments, now complicating the simple, is simply wasting time.. think!

3 answers


The tags <i>, <em>, <b> and <strong> end up being mistaken or used erroneously because, most of the time, they have the same type of rendering in the browser (the first two having the text in italics, and the last two being in bold). But their meanings differ, being that:

  • <i> = Used to designate a distinctive text, such as in special terms or use in taxonomy.
  • Example: A arvore, de nome em latin <i>Araucária brasiliensis</i>
  • Output.: The tree, named in latin Araucaria brasiliensis
  • <em> = Used to emphasize a word (or phrase) that you would speak with intonation differentiated from the rest of the text and that would change its meaning.
  • Example: E ela jura que <em>não</em> sabe, não é mesmo?!
  • Ouput: And she swears that nay you know, it’s really not?!
  • <b> = Directed to texts that need to be highlighted, but without connotation or explicit explanation.
  • <strong> = Used to emphasize a word or phrase of high importance.
  • Example: Pessoal, eu realmente preciso destes relatórios <strong>para amanhã sem falta</strong>!
  • Output: Guys, I really need these reports for tomorrow without fail!

The tags <i> and <b> were very useful at the beginning of the Web era, when it was common for HTML tags to be used to visually style the content of a page.

With the evolution of the internet and browsers, and with the creation of the CSS language, it is ideal that the content is stylized via CSS properties, and not via tags (or attributes) HTML, which removes the need to use the above tags for visual purposes and makes them useful only for semantic and usability use.



  • 4

    Excellent explanation and references, thanks! But I still find the difference a little vague from the in to the Strong. If you use a different intonation, it’s often because it’s important, isn’t it? I understand the difference in the examples given, but when applying to any content I do not know if it will be so clear.

  • 1

    +1 for the references.

  • 1

    @bfavaretto, I see the <em> as a way of showing that you used a different intonation in the sense of more sudden terms, for example to define an ironic passage in your sentence. In the case of <strong> would be something of utmost importance and prominence.

  • Got it. I’ll keep that in mind the next time I need them in practice, and see if it works :)


Both are valid and it seems that the difference between them becomes clearer and clearer. Although they serve approximately the same goal, in this month’s W3C description the differences are clear to <b> and <strong>:

The Strong element represents Strong importance, seriousness, or urgency for its Contents.

That is, the element <strong> should be used to describe/represent "strong importance", "seriousness" or "urgency" in its contents.

In the same document the element <b> is described as a piece of text where it is intended to call the homage for practical reasons without adding meaning of importance and without meaning change of "tone of voice" or behavior.

In the original:

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 key words in a Document Abstract, product Names in a review, actionable words in Interactive text-driven software, or an article lede.

The cases of <i> and <em> are less clear. In this case the authority says the <i> should be used in technical terms, where the text is of a different type as in taxonomy names or technical terms. The element <em> is the most ambiguous, but one important difference is that they can be used "nested" in English "nested". That is, if we use <em>Hoje está um <em>lindo</em> dia, certo?</em> the word beautiful will have a different accent level than the rest of the sentence.

I imagine that these more or less subtle differences will be important in the future in programs that interpret HTML. In fact they are already so that, for example, blind people can have extra information about this text.

  • Interesting use that nestled, but I’ve never seen anyone use!

  • 1

    @bfavaretto yes, me neither, but it gives idea that the W3C is opening doors for such use.

  • 2

    Big question, @bfavaretto, straight to the hit charts! It’s curious what kind the Font Awesome caught the <i> to render the icons, what do you think of this Sergio?

  • 3

    @curious brasofilo. I find it strange (and wrong) this use since the idea is not to differentiate text but to introduce an icon in a tag with empty content. I wonder why they took that line...

  • I think they chose because of the "i" of "icon". Really serious.

  • Pauper <i>! They’ve kidnapped the child... It’ll be over <b> shortly :)

  • 5

    @brasofilo, and Sergio think the issue of Font Awesome use the element <i> was a mistake, see that same mistake was made by bootstrap in previous version 2.3.2, and now on version 3.0 already change to the element <span>, which is an element without semantic ends (as far as I know), as it was a nonsemantic approach to use the <i>, and I believe that Font Awesome will make a similar decision in future versions.

  • 2

    @brasofilo A tag <i/> was chosen because Fontawesome was prepared for use with Bootstrap despite being compatible with any other framework. At the time, Bootstrap was using <i/> to represent an icon, something that has been discontinued and properly enhanced for a <span/>. Deep down, <i/> is shorter than <span/> and it is assumed that the choice will be for a Markup with less "weight".

  • Yeah, I was also wondering why Font Awesome uses <i> for icons, because that’s completely wrong. The <span> really has no semantic value.

Show 4 more comments


<em>: It serves to emphasize a particular text, as if you were increasing the intonation of your voice to make that word detached and visible.


    <em> Faça sua lição! </em>

<strong>: It gives importance/seriousness/urgency to a given text. Its rendering is currently made in bold, but in the past the underscore was applied. Only use it if the text in question is very important for the user.


    <strong>Para agora</strong> com isso.

Another function of <strong> is to give a higher hierarchy/prominence to a given word.


<h1> Capítulo 1 - <strong>A Crise</strong> </h1>

You can nest a <strong> within a <strong> or a <em> within a <strong>... to give even more emphasis/importance to the text in question, just don’t overdo the nesting (use at most 3 levels and look there).

These little guys above serve to replace the <b> and the <i>? No! Each tag has to be semantic value and its utility. For example, let’s take a look at the <i>

<i>: It is used in ideomatic texts, like when you want to write a Chinese proverb, or an English expression... You use <i>, just be sure to use the attribute lang together if possible.


    <i class="phrase" lang="en-us"> You are making up excuses </i> é uma frase que significa: você está criando desculpas.

Another case is when you want to name a taxonomic name.


    O <i class="taxonomy"> Homo Sapiens </i> é o ser humano.

Psu: since the <i> has low semantic value, put a class in it to help anyone reading the code and also to increase SEO.

Have more use cases also: Names of vessels, transliterations, dreams, thoughts, technical terms... Anyway, you can see that the <i> has much more uses than the <em>, but that does not mean that the <i> replaces the <em>. Each element is special.

But what about the <b> and the <strong>? It’s the same thing:

<b>: It serves for material purposes, like when you want to give a little importance to an element, but nothing very considerable. It even serves to mark keywords in a document.


    O <b>HTML</b> é uma <b>linguagem de marcação</b> muito antiga. Ela foi criada por <b>Tim Bernes-Lee</b>

Again: no tag replaces each other, both have their use cases.

Note also that you can use a stylesheet to overwrite the styles of the above elements, this is normal and correct.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.