HTML Emphasize Tags- How to Use and Correctly

These are HTML emphasis tags. <em> marks emphasis (italics in most browsers). <strong> marks strong emphasis (bold in most browsers).

Sounds simple. But most developers use them wrong. This guide fixes that.

The Real Difference: It's Not About Looks

Here's what trips people up. These tags aren't about styling—they're about meaning.

Browsers display them with default styles, but that's not the point. The point is semantic meaning. Screen readers, search engines, and other machines use these tags to understand how you're emphasizing something.

When to Use <em>

Use <em> when you want to change the stress or intonation of a sentence. It signals "this word changes the meaning of the sentence."

Example:

<p>I <em>literally</em> told you to close the tab.</p>

That means you're stressing the word "literally." Without it, the sentence is flat. With it, you're annoyed.

When to Use <strong>

Use <strong> for content with high importance. It signals "this matters."

Example:

<p><strong>Warning:</strong> This action cannot be undone.</p>

That's not about stress. That's about importance. A warning deserves <strong>, not <em>.

The Comparison Table

Yes, <i> and <b> are still valid. They have semantic meaning too. But that's a separate conversation.

Mistakes Developers Actually Make

• Using <strong> for everything. If you're emphasizing a word in dialogue, use <em>. Not everything needs to be "important."
• Using <em> for warnings. "Do not touch" is not emphasis—it's a warning. Use <strong>.
• Nesting them incorrectly. You can nest them, but the meaning stacks. <strong><em>very important and stressed</em></strong> means "this is important AND you should stress it."
• Using them for styling. If you want italics for design reasons with no semantic meaning, use CSS. These tags carry meaning.

How Screen Readers Handle These Tags

Screen readers don't just read text. They interpret it. When they hit <strong>, they may change pitch or volume. When they hit <em>, they may stress the word.

This is exactly why using the right tag matters. A screen reader user hearing "I literally told you" with the wrong emphasis will get the wrong message.

Test your content with a screen reader if accessibility matters to you. It should.

How to Use Them Correctly (Getting Started)

Step 1: Ask What You Mean

Before typing, ask: "Am I changing how this sentence sounds, or flagging that this matters?"

• Changing sound → <em>
• Flagging importance → <strong>

Step 2: Write the HTML

Wrap the word or phrase, not the whole sentence (usually).

<p>Click the button to <strong>save your changes</strong>.</p>

<p>I <em>told</em> you it was broken.</p>

Step 3: Style With CSS If Needed

These tags have default styles, but you can override them. Just don't use them as styling shortcuts when there's no semantic reason.

em { font-style: normal; } /* Removes italics if you want */

Yes, you can remove the default styling. No, you shouldn't use <strong> just because you want bold text when there's no semantic reason.

Quick Reference

• <em> = stress/intonation. "I like this" vs "I like this"
• <strong> = importance. Warnings, key points, critical info
• They're semantic, not styling tags
• Screen readers interpret them differently
• You can nest them, but keep it logical

That's it. Use the right tag for the right reason. The browser default styles are just a bonus.