Module 2: Text · Lesson 3 of 8
HTML strong vs b and em vs i: Bold and Italic Text
All lessons in Module 2
Goal: Use strong and em for important and stressed words.
Learn
Two elements add meaning to words inside a sentence:
<strong>marks something as important, serious or urgent. Browsers show it in bold.<em>adds stress emphasis: the word you would say louder. Browsers show it in italics.
Stress changes meaning: "I never said she ate it" and "I never said she ate it" are different accusations. Printers have marked this kind of emphasis in typography (opens in a new tab) with italics for centuries.
Both are inline elements. They sit inside a paragraph and don't start a new line. Putting one element inside another is nesting (you met it in Tags and Elements), and the inner one always closes first: <p><strong>Hot!</strong></p>. The older tags <b> and <i> change only the look. With strong and em, the meaning is written into the code.
The short version
<strong>marks important, serious or urgent text. Browsers show it in bold.<em>marks stress emphasis, the word you would say louder. Browsers show it in italics.- Both are inline elements. They sit inside a sentence and don't start a new line.
- When nesting, close the inner element first:
<p><em>...</em></p>.
Example
<p><strong>Do not</strong> feed the gremlins after midnight.</p>
<p>I said the <em>blue</em> wire, not the red one!</p>Your task
These pancake instructions need some emphasis:
- Wrap
Warning:in<strong>, because it is important. - Wrap
very hotin its own<strong>too. - Wrap the word
oncein<em>, because you would stress it when speaking. - Use
strongandem, notbori, and close the inner element before</p>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<p><strong>Heat the pan. Flip each pancake once. Serve warm.</strong></p>Right
<p>Heat the pan. Flip each pancake <em>once</em>. Serve warm.</p>Mark a whole paragraph as important and nothing stands out. Save strong and em for the few words that need them.
Wrong
<h2><strong>Ingredients</strong></h2>Right
<h2>Ingredients</h2>Headings are already bold and already important, so wrapping them in strong adds nothing.
Go deeper
The older tags were not thrown away. The HTML Living Standard (opens in a new tab) gave <b> and <i> precise new meanings: b for text you want to draw attention to without making it more important, and i for an alternate voice, such as foreign words, scientific names or a character's thoughts. Reach for strong and em first, and use b and i only when those definitions fit.
Don't expect screen readers to shout. Most read strong and em in a normal voice by default, so put critical warnings in the words themselves. Use the tags anyway. They keep the meaning in your code for every tool that reads it.
You can nest them for degrees: strong inside strong means even more important. A few other inline elements carry meaning as well. <mark> highlights text relevant to the reader, like search matches, and <small> marks side comments and fine print. The mark reference page shows a search-result example.
If you can't say why a word is important or stressed, it probably needs no tag at all.
Frequently asked questions
What is the difference between strong and b in HTML?
They look the same by default (bold) but mean different things. <strong> says the text is important, serious or urgent, like a warning. <b> only draws attention without adding importance, for example to keywords in a summary or product names. If the text matters, use strong. If all you want is bold, CSS is often the better tool. The definition of strong (opens in a new tab) in the HTML standard has more examples.
What is the difference between em and i in HTML?
<em> is stress emphasis that changes the meaning of a sentence, the word you would say louder. <i> marks text in a different voice without stress: a foreign phrase like bon appetit, a technical term, a thought or the name of a ship. Both appear in italics, but only em means "say this with emphasis".
How do I make text bold in HTML?
If the text is important, wrap it in <strong>. If it should only look bold, for example a whole design style, use CSS: font-weight:bold. Skip the obsolete <font> tag, and don't use headings to get bold text. Headings already appear bold because browsers style them that way. If you format text in a visual editor such as HTMLEditor.tools (opens in a new tab), check its source pane to see whether the bold button wrote strong or b.