Meaning vs Appearance
Four elements make text bold or italic, but two of them carry semantic weight and two do not. Picking the right one changes what you tell the browser, screen readers, and search engines.
What they are
<strong> marks text as strongly important, serious, or urgent. <em> marks a word that carries spoken stress, the kind that shifts meaning depending on which word you emphasize. Both are semantic: they tell the browser that the word matters in a specific way, not just that it should look different.
<b> draws attention to text without implying importance, typically for a keyword in a summary, a product name, or a lead sentence where convention calls for bold. <i> marks text in an alternate voice or mood: a technical term being introduced, a foreign phrase, a character's inner thought, or a ship name. Neither <b> nor <i> add semantic weight. They are typographic signals, not meaning signals.
Why it matters
Screen readers can announce <strong> with added emphasis and may stress <em> during speech synthesis. When you use <b> for something that is actually urgent, the visual result looks the same, but the machine signal is absent. A listener who cannot see bold text misses the importance entirely.
The distinction also sharpens your own thinking. If you catch yourself reaching for <b> because something is important, you probably want <strong>. If you reach for <i> because something sounds dramatic, you probably want <em>. The tags make the reason explicit.
How it works
Use <strong> for warnings, critical instructions, or any word where the importance is genuinely part of the content. Use <em> for the word in a sentence that a speaker would stress aloud. The stress test works perfectly: say the sentence out loud and notice which word you would naturally lift your voice on. That word gets <em>.
A subtle thing about <em>: stressing different words in the same sentence produces different meanings. I never said <em>she</em> took it implies someone else said it. I <em>never</em> said she took it is a flat denial. The markup encodes which reading is intended.
Use <b> for key terms, the first use of a technical word in prose, lead-in text by convention, or product names that are bold by style guide. Use <i> for technical terms when you introduce them, for titles of short works, for foreign phrases, or for a character thinking to themselves. When you only want the visual style with no meaning attached, use CSS font-weight: bold or font-style: italic directly.
Try it
Watch how the same sentence reads differently when <em> moves to a different word, and see <strong>, <b>, and <i> each in a natural context.
<strong> importance
Warning: save nothing to plain text.
<em> stress changes meaning
I never said she took it.
I never said she took it.
<b> stylistic offset
Install the npm package.
<i> alternate voice
Add a pinch of fleur de sel.
Semantic weight on the left; typographic convention on the right.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
<strong>= important, serious, or urgent;<em>= spoken stress that changes the sentence meaning.<b>= stylistic offset with no semantic weight;<i>= alternate voice (terms, foreign phrases, thoughts).- Moving
<em>to a different word in the same sentence produces a different meaning. - For pure visual bold or italic with no meaning attached, use CSS instead of
<b>or<i>.
Done with this concept?
Mark it complete to track your progress. No login needed.