Emphasis and Importance: strong, em, b and i

Concept

HTML has two elements that render bold and two that render italic. Visually the pairs are identical. Semantically they are opposites: one pair carries meaning, the other pair carries only appearance.

The rule that resolves almost every case: if reading the sentence aloud with that word stressed changes what the sentence means, it is em. If the content matters more than the rest of the sentence, it is strong. Otherwise you probably want b, i, or a CSS class.

Syntax

<p><strong>Do not</strong> switch the device off while it updates.</p>
<p>I said the meeting is on <em>Tuesday</em>, not Thursday.</p>
<p>The <b>refund window</b> is thirty days from delivery.</p>
<p>The dish is served with <i lang="hi">kadhi</i> on the side.</p>

Example: how em changes meaning

The same sentence, stressed four different ways, means four different things:

<p><em>She</em> approved the design.</p>    <!-- she did, not someone else -->
<p>She <em>approved</em> the design.</p>    <!-- approved, not merely saw -->
<p>She approved <em>the</em> design.</p>    <!-- that one specifically -->
<p>She approved the <em>design</em>.</p>    <!-- the design, not the budget -->

A screen reader can change its intonation for em. No such thing is possible with an italic span, because there is nothing in the markup to act on.

Example: nesting strong

strong nests, and each level raises the importance of what is inside it:

<p><strong>Warning: <strong>never</strong> connect the two terminals directly.</strong></p>

Explanation

The distinction exists because HTML separates content from presentation. Before HTML5, b and i were defined purely as bold and italic, which made them presentational and therefore discouraged. They were then redefined with meanings of their own, so both pairs are valid today - but they mean different things and are not substitutes for one another.

Practically: strong and em are what you want most of the time in prose. b is for keywords in a summary, a product name in a review, the lead sentence of an article. i is for a technical term on first use, a ship or a book name, a foreign phrase, or a character thinking.

Important rules

• All four are inline and may contain other inline elements.
• strong and em are exposed to assistive technology. b and i generally are not.
• Bold and italic are only defaults. CSS can render strong in red small caps and it still means importance.
• Pair i with lang when it marks a foreign phrase, so pronunciation is correct.
• Never use these elements to make a heading. A heading is a heading.

Common mistakes

• Using <b> as a substitute for a heading, which produces a page with no outline at all.
• Wrapping a whole paragraph in strong. If everything is important, nothing is, and a screen reader emphasises the entire block.
• Reaching for <span style="font-weight:bold">. If the word matters, it deserves an element; if it does not, it does not need bolding.
• Using em for a book title. That is an alternate voice, so i or cite.
• Believing b and i are deprecated. They are not; they are just narrower than most people assume.

Best practices

• Default to strong and em in body copy, and reach for b and i only when their specific meanings fit.
• Emphasise a phrase, not a paragraph. One or two words is usually right.
• Add lang whenever i holds a phrase from another language.
• Consider cite for the title of a work and dfn for the defining instance of a term - both are more precise than i.
• Read the sentence out loud. If the stress changes the meaning, the element is em.

Practice

1. Mark up: Never share your one time password. The bank will never ask for it. Which words get strong, and why not the whole sentence?
2. Write one sentence four times, moving a single em each time, so that each version means something different.
3. Decide the correct element for each: a product name in a review, a warning on a medicine page, the Latin name of a plant, the stressed word in a correction.
4. Find a page that uses bold text where a heading belongs. Rewrite that section so the outline is correct.