<i> and <em>?<em> is for text that carries stressed importance in a sentence. Screen readers will often apply vocal emphasis, and the meaning of the sentence might change without it.
For example: You must complete this step. That’s what <em> is for; text that changes the weight or urgency of your message.
<i> is also semantic, but not for emphasis. In HTML5, it’s used for phrases that are offset from the surrounding text without implying importance.
Think of scientific names, technical terms, idioms, or imagined thoughts: “She thought to herself, Maybe this isn’t the right path.”
In this case, the italicized text is part of the narrative voice, not a cue to stress the words.
These tags aren’t interchangeable; there is nuance in their purpose. While both often look the same in a browser (rendered in italics), their roles in the structure of your content are different.
Using them correctly will make your markup more meaningful, and your site more accessible.
Use CSS for appearance. Use HTML for meaning.
If your goal is purely visual, eg making text render as italic without implying meaning, use a <span> with font-style: italic instead.
That keeps styling logic separate from document structure, making your HTML easier to read, maintain, and scale.
For example:
<span class="italic">This is just visual styling</span>
Curious about more HTML technicalities? Want to pwn your friends with your pedantic markup knowledge? Check out this other article about b tags vs strong tags.