The <em> tag stands for emphasis. Its purpose is to indicate that the enclosed text should be stressed when read.
While it makes the text appear italicized in the browser, its role is primarily about the meaning of the content:
- Changing the Stress: In spoken language, we often stress certain words to change the meaning of a sentence. The
<em>tag tells the browser (and screen readers) which words to stress. - Semantic Meaning: Unlike the
<i>tag (which just makes text italic for visual style),<em>carries semantic weight. It suggests that the text has a different "voice" or "accent" compared to the surrounding words. - Accessibility: Screen readers will often read emphasized text with a different verbal stress or pitch, helping users with visual impairments understand the intended tone of the sentence.
<em> vs. <i>
<i>: Used for text that is offset from the normal prose for a different mood (like technical terms, idiomatic phrases, or thoughts), but without added emphasis.<em>: Used when you want to stress a word.
Example:
- "I love HTML" (implies strong feeling).
- "I love HTML" (implies that you love HTML specifically, compared to other languages).
You can see this in action by adding the secondary paragraph to your index.html as shown in the instructions. The word "emphasized" will lean to the right