What is the semantic difference between em and strong? Do they replace i and b?

The <i> , <em> , <b> , and <strong> tags are commonly confused or misused because they usually have the same type of rendering in the browser (the first two having italicized text, and the two last ones being bold). But their meanings differ, where:

  

• <i> = Used to designate differentiated highlighted 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, Latin name Araucária 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 does not know, does she?
    
  

  

• <b> = Directed to texts that need to be highlighted, but without connotation or explicit explanation.   
  • Example: O e-mail dela é <b>[email protected]</b>
    
  • Output: Her email is [email protected]
    
  

  

• <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: Folks, 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 visually style the contents 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 HTML tags (or attributes), which eliminates the need to use tags above for visual purposes and makes them useful only for semantic use and usability.

References:

link
link
link
link
< sup> link link     

Both are valid and it seems increasingly clear the difference between them. Although they serve roughly the same purpose, in the W3C description this month the differences are clear for <b> and <strong> :

  

The strong element represents strong importance, seriousness, or urgency for its contents.

That is, <strong> element % should be used to describe / represent "strong importance", "seriousness" or "urgency" in their content.

In the same document <b> element % is described as a piece of text where you want to call attention for practical reasons without adding significance 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 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 the review , actionable words in interactive text-driven software, or an article lede.

The cases of <i> and <em>