Difference Italic and emphasis in HTML?

Question

What’s the difference between tags <i> and emphasis <em> in HTML?

When using each of them?

Answer 1

The tag <em> has meaning emphasized. You should use it when you want to stress a particular thought or idea. Browsers usually make the text emphasized in italic; A reader may recite the text a little slower or louder than the words surrounding it.

Example:

A rota é perfeitamente segura desde que você permaneça na fuga. Acima de tudo, <em> não andam no intervalo de disparo </em>.

Sometimes you need to emphasize the text, not to make it stand out, but to clarify the meaning. For example, if I put a sign saying Choose your own strawberries, I am inviting you to buy strawberries from me, on the understanding that you can catch them. But if I say Choose your <em>own </em> strawberries, I’m telling you to keep my strawberries quiet.

The tag <i> also causes the text to be processed in italics, but in this case it is for style purposes instead of adding emphasis. You use i to indicate a different voice or mode, or to separate a sentence or word from the normal flow of text.

The label is often used for the titles of films, books, and works or art, for ship names, for short foreign phrases, and in certain specialized uses, such as mathematical theorems and biological nomenclature. But note that all these uses are a matter of style; Example:

Ele passou o tempo recitando<i> o tiroteio de Dan McGrew</i>.

Apesar de perder cada jogo, mantivemos nosso <i> esprito de corpo</i>.

SOURCE

Answer 2

Although the visual result is the same, as the two leave the content in italics, the semantic meaning is different. The tag <em> is used to emphasize the content and the tag <i> is used for the general text style.

<p>
  Essa <em>palavra</em> merece ser enfatizada 
</p>
  
  
<p>
  <i>Quero deixar todo meu texto em itálico<i/>
</p>