Emphasis and Importance

Four elements render in almost the same two ways. <em> and <i> both come out italic. <strong> and <b> both come out bold. Look at the rendered page and you cannot tell which is which. That visual overlap is why these four are picked at random more often than any other elements in HTML, and it is why this chapter exists. They are not interchangeable. Each makes a different claim about the content, and the claim reaches screen readers and search engines whether or not it reaches the eye.

<em> marks stress emphasis

<em> marks stress emphasis: the kind that changes what a sentence means depending on which word you lean on when you say it out loud. The standard example is one sentence read five ways.

“I never said she stole the money.”

Now move the stress:

“I never said she stole the money.” (I did not say it, so someone else might have.)

“I never said she stole the money.” (I implied it, or wrote it, but I did not say it.)

“I never said she stole the money.” (Someone else stole it.)

“I never said she stole the money.” (She did something with the money, but not steal it.)

Same words. Four different meanings, and the only thing that changed was where the emphasis landed. That is exactly what <em> is for. You wrap the word the reader should stress, and the placement carries meaning the bare text cannot.

<p>I never said <em>she</em> stole the money.</p>

This is linguistic stress, not decoration. And it reaches assistive technology. VoiceOver and NVDA can announce <em> content with a shift in prosody in some reading modes, changing inflection the way a person would when reading the sentence aloud. The semantic signal does not stop at the screen.

<strong> marks importance

<strong> marks content of strong importance, seriousness, or urgency. It is not “make this bold.” The bold rendering is a default, the same way <blockquote> indenting was a default in Chapter 08. The meaning is the importance of the content itself.

<strong> belongs on warning text in documentation (“Do not run this command as root”), on a critical condition that must be registered before the reader continues. Those are cases where the content is genuinely more important than the prose surrounding it.

Unlike <em>, <strong> does not change the sentence’s meaning based on where you put it. Moving the stress in the money sentence rewrote it. <strong> does not work that way. It does not reweight a sentence. It flags the content inside it as content that matters more than what surrounds it.

<i> and <b>, by the spec

<i> and <b> are the presentational-looking pair, and the HTML spec is specific about what they are actually for.

<i> marks text set off from the surrounding prose for a conventional reason, without emphasis or importance. The spec lists the cases: a technical term on first use, a foreign-language word or phrase, a thought or idiomatic phrase quoted from another discipline, and proper names of ships, aircraft, and species. “The process of converting the document tree into pixels is called rendering.” The term en passant. The species Quercus rubra. Titles of works can go here too, though <cite> is the better element for those and Chapter 08 covered why.

<b> marks text brought to the reader’s attention without conveying extra importance. The spec’s own examples are product names in a review, keywords in a document, and the lead sentence of an article. Nothing in that list is more important than the prose around it. It is just text the eye should find.

That is the practical line between <strong> and <b>. <strong> says this matters. <b> says look here. One is a claim about weight, the other is a claim about attention.

What screen readers actually do with these

<em> and <strong> carry semantic weight, and assistive technology can act on them: prosody changes for <em>, and VoiceOver announces <strong> content in some contexts. <i> and <b> are presentational, and screen readers do not announce them consistently, because there is no semantic intent to announce.

This gives you a clean test. If you need emphasis that communicates to a screen reader user, <em> or <strong> is the element. If the effect is purely visual with no semantic intent behind it, the element is not <b> or <i> either. It is CSS.

Defaults are not definitions

<em> renders italic because Western typography conventionally shows stress emphasis with italics. <strong> renders bold because importance is conventionally shown with weight. Those are starting points, not the meaning. You can override either one without touching what the element means.

/* Valid: <em> styled upright for a context where italic reads wrong */
.pullquote em {
  font-style: normal;
  font-weight: 600;
}

That <em> is no longer italic, and it is still stress emphasis. A screen reader still treats it as stress emphasis. The visual presentation changed; the semantic claim did not. Style follows from the element. It does not define it.

The misuse, and the honest version

The common mistake is reaching for <strong> whenever you want bold and <em> whenever you want italic, with no semantic intent at all. A keyword you want heavier. A product name you want to stand out. A section marker. None of those carry importance or stress, so <strong> and <em> are overclaiming.

When the reason is visual, <b> and <i> are the more honest elements: <b> for bold without importance, <i> for italic set-off without emphasis. And when there is no conventional reason at all, only a styling preference, the most honest answer is CSS. font-weight: 600 on a <span> communicates nothing to assistive technology, and that is the correct outcome when the styling means nothing semantically. The element should claim what is true and no more.

This is the last chapter of the semantics track, and it lands on the same idea every chapter before it did. A type scale, line length, <blockquote>, <cite>, <em>. Every one of them came down to one distinction: the element you choose is a claim about what the content is, and CSS is how that content looks. They are not the same job, and treating them as the same job is where the misuse always starts. The intro chapter, written last, looks back across all nine. It will say this again, because by then it will be the only thing left worth saying.