Bold, Italic and What They Mean

The strong, em, b, i and small elements all change how text looks, but each one says something different about what the words mean, so you choose them by meaning, not by looks.

Novice · HTML · Updated October 31, 2026

After this lesson you can

Choose between strong, em, b, i and small by what the words mean, not how they look
Explain how moving em to another word changes what a sentence means

Key takeaways

strong marks words that are important, serious or urgent, such as a warning. b draws the eye to words without making them more important.
em stresses a word the way you would when speaking, and moving it to another word changes what the sentence means.
i marks words in a different voice, such as a phrase in another language or the name of a ship.
small is for fine print, such as a copyright line or the fee under a ticket price.
Choose the element by what the words mean. How they look can always be changed with CSS.

The Neon Lanterns' ticket page says Doors open at 7. No refunds. You want No refunds to stand out, so nobody is surprised later. HTML has two elements that make text bold and two that make it italic, and they don't mean the same thing. You'll make this choice on every page with a warning, a product name, a word in another language or a line of fine print, and picking by meaning is what makes a page clear to everyone who reads it, including the people who listen to it.

Important words: strong

A sign on a door that says Wet paint isn't decoration: it's important. In HTML, words that are important, serious or urgent go in  (read "strong"). Browsers show it in bold.

<p>Doors open at 7 p.m. <strong>No refunds after the show starts.</strong></p>

Stressed words: em

Read this sentence aloud, leaning on a different word each time:

<p><em>I</em> never said the drummer was late.</p>
<p>I never said the <em>drummer</em> was late.</p>
<p>I never said the drummer was <em>late</em>.</p>

The words are the same, but the meaning changes with the stress:

Stress on I: someone else said it.
Stress on drummer: someone else was late.
Stress on late: the drummer did something else wrong.

 (read "em", for emphasis) marks that stress, the way your voice leans on a word. Browsers show it in italics. Because it changes the meaning, put it on exactly the word you'd stress, and no more.

Attention, not importance: b

Sometimes you want a word to catch the eye without saying it's more important than the rest: a product name in a review, or the key words in a summary. That's  (read "b", for bring attention to). Browsers show it in bold, like , but it adds no importance.

<p>The band's guitarist swears by the <b>Lantern Fuzz</b> pedal.</p>

A different voice: i

Some words are set apart from the text around them because they're in a different voice: a phrase in another language, the name of a ship, a thought. That's  (read "i"). Browsers show it in italics, like , but it doesn't stress the word.

<p>Their first show was on the riverboat <i>Delta Belle</i>.</p>
<p>They opened for the Mexican band <i lang="es">Los Faroles</i>.</p>

The lang attribute (see Attributes) says the words are Spanish, so a screen reader can pronounce them in Spanish.

Fine print: small

The terms under a price, a copyright line, a short side note: that's fine print, and it goes in  (read "small"). It doesn't make the words less true; it marks them as a side comment.

<p>Tickets $25 <small>plus a $3 service fee</small></p>
<p><small>&copy; 2026 The Neon Lanterns</small></p>

Choose by meaning, not looks

Element	It means	Browsers show it
`<strong>`	Important, serious or urgent	bold
`<b>`	Catch the eye, with no extra importance	bold
`<em>`	Stress, as when speaking	italics
`<i>`	A different voice: another language, a ship's name, a thought	italics
`<small>`	Fine print or a side comment	smaller text

How they look is only the browser's starting point. CSS, the language for how a page looks, can make  red instead of bold, or  underlined. What can't be changed later is what your HTML says the words mean, and that meaning travels: to search engines, to translation tools and reading modes, and to the next person who edits your page.

To be honest about screen readers: most of them read  and  in the same voice as the rest unless their user turns that setting on. The meaning is still in the page for every tool and person who looks for it, and choosing by meaning costs you nothing. You'll meet this idea again in Semantic HTML, the lesson that opens Module 2.

Try it. In your neon-lanterns folder, add a paragraph about the band's next show with a warning in , the name of a venue in another language in  with a lang attribute, and the ticket fee in . Then write the drummer sentence twice, with  on two different words, and read both aloud.

Check yourself

2 questions to try on the lesson page.

So what

Bold and italics are only how the browser shows meaning. Choose , , ,  or  for what the words mean, and the page says what you mean to everyone who reads it.

Key terms

Cheat sheets