strong, em, b and i

Bold and italic look simple, but HTML has two elements for each, and they are not synonyms. One pair adds meaning; the other pair sets text apart without adding importance. Picking the right one tells assistive technology and search engines something true about your words.

The rule

strong for importance, em for stress; b and i only set text apart.

<strong> marks content as important, serious or urgent.

<em> marks stress emphasis: the word you would say differently out loud. Moving it changes the meaning of the sentence.

<b> draws attention to text without making it more important: keywords in a summary, product names in a review, the opening words of an article.

<i> marks text that is different in kind from what surrounds it: a word from another language, a technical term, a ship's name, a character's thoughts.

By default strong and b look bold, and em and i look italic. The looks are the same; the meanings differ. And if you just want bold text for design reasons, such as a card title that is not important content, that is CSS's job, not any of these four.

The shortcut

Read the sentence aloud in your head.

The trap is thinking b and i are "old and wrong". They are valid modern HTML with specific jobs; they are wrong only when you actually mean importance or stress.

These elements can nest. A sentence can contain an em inside a strong when an important warning also carries spoken stress, as in "Do not open the valve" inside a strong warning. Use that sparingly: when everything is emphasised, nothing is. One or two emphasised phrases per paragraph is a sensible ceiling.

Drills

Answer fast — trust the rule.

Remember

• strong = important, em = stressed; b = eye-catching, i = different in kind.
• Shortcut: read it aloud. Warning voice, stress, a different kind of word, or a keyword?
• Trap: choosing by default looks; purely visual bold or italic belongs in CSS.