<em> vs <i>
<em> is stress that changes the meaning of a sentence when read aloud. <i> marks a different tone: foreign words, names or thoughts, without changing meaning.
Side-by-side comparison
#Meaning
Default style
Changes the meaning of the sentence
Can be nested for stronger emphasis
Typical example
Example
#<p><em>I</em> didn't delete that file. Maybe someone else did?</p>
<p>The field guide lists the lion by its scientific name, <i lang="la">Panthera leo</i>.</p>Definition and usage
#<em> marks stress, meaning a word spoken with emphasis that changes the meaning of the whole sentence. "I didn’t delete that file" suggests someone else did it, and stressing a different word in the same sentence would change the meaning completely. <em> elements can be nested for even stronger emphasis.
<i> doesn’t add stress and doesn’t change the meaning of the sentence. It marks a piece of text in a different tone: a foreign expression, a Latin species name, a technical term, or a character’s thoughts. Give a foreign-language species name a lang attribute, e.g. <i lang="la">Panthera leo</i>.
Browsers display both elements in italics, so they’re indistinguishable by eye. The difference is purely about meaning. If you want italics alone with no meaning behind them, for example in an image caption, use CSS: font-style: italic.
Syntax
#<em>stressed text</em>
<i>text in a different tone</i>More examples
#<p><em>I</em> didn't report that bug. Maybe someone else reported it?</p>
<p>I didn't report <em>that</em> bug. I reported a completely different one.</p><p style="font-style: italic;">Text in italics just for looks, with no special meaning.</p>Good practices
#- If a piece of text changes the meaning of what’s said when read aloud, use
<em>. - Mark foreign expressions inside
<i>with alangattribute too, e.g.lang="fr". - Plain italics with no meaning is a job for CSS:
font-style: italic.
Related entries
#- <em>Stress in a sentence: a word that, read aloud, is pronounced with emphasis.
- <i>Text in a different tone or voice: foreign expressions, Latin names, a character’s thoughts, technical terms.
- <strong>Text of great importance: a warning, key information.
- <b>Draws attention to a piece of text without giving it any extra weight, e.g. keywords.
- <cite>The title of a work: a book, an article, a movie, a song, a game, or a piece of software.
Spotted a mistake or missing an example? Write to us.