Bold, italic and other text meaning

Looks versus meaning

Every browser shows strong in bold and em in italics, so it is tempting to think of them as "the bold tag" and "the italic tag". They are not. They describe what the words mean, and the bold or italic look is only the default way of showing that meaning.

This matters because not everyone reads your page with their eyes. A screen reader can change its voice for emphasised words, a search engine can notice which phrases you marked as important, and a reader mode or translation tool can keep the meaning intact. If you only cared about looks, CSS could make any text bold.

strong and em

<p><strong>Warning:</strong> the oven door gets hot during cleaning.</p>
<p>I asked for <em>one</em> sugar, not three.</p>
<p>I asked for one <em>sugar</em>, not one salt.</p>

• strong means the text is important, serious or urgent: warnings, key instructions, the one sentence a skimming reader must not miss.
• em means stress emphasis, the way your voice leans on a word when you speak. Moving the emphasis changes the meaning, as the two sugar sentences show.

You can nest them: <strong> inside <em> for a word that is both stressed and important. Use them sparingly. When everything is important, nothing is.

b and i are not wrong, they are different

b and i are valid HTML, but they mean "set this text apart" without adding importance or stress:

• i for words in another language (<i lang="hi">jugaad</i>), technical terms, names of ships, and thoughts in fiction;
• b for keywords in a summary or product names in a review, where you want them to stand out but they are not more important than the words around them.

A simple test: read the sentence aloud. If you would naturally stress the word, use em. If the word matters more than the rest, use strong. If it is just a different kind of word, i or b is fine.

Other inline elements worth knowing

<p>Search results for “tea”: Darjeeling <mark>tea</mark> is grown at high altitude.</p>
<p>Run <code>npm install</code>, then press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop the server.</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Water is H<sub>2</sub>O. A square of side 3 m has an area of 9 m<sup>2</sup>.</p>
<p>Price: <del>₹1,299</del> <ins>₹999</ins></p>
<p><small>Prices include GST. Offer valid while stocks last.</small></p>

small does not mean "make it smaller"; it means "this is fine print". If you just want smaller text, use CSS.

A note on abbr

The title attribute shows a tooltip on hover with a mouse, but touch-screen users and many keyboard users never see it. Write the full form in the text the first time ("World Health Organization (WHO)") and use abbr as a bonus, not as the only explanation.

If you write documentation or blog posts in Markdown, **text** becomes strong and *text* becomes em. You can check the generated HTML in the Markdown Viewer.

Common mistakes

• Using strong to make a heading. If text introduces a section, it should be a real heading (h2, h3), not a bold paragraph.
• Bold everywhere. A paragraph with five strong phrases has no clear priority. Pick the one that matters.
• Choosing an element for its size, such as small for a subtitle or sup for a raised design effect. Use CSS for looks.
• Relying on title alone to explain an abbreviation.

Exercise

Mark up this product note so that the warning is important, the stressed word is emphasised, the old price is shown as removed and the new one as added, the keyboard shortcut uses kbd, and the legal line is fine print:

Warning: charge the speaker fully before first use. It is the charger that must be original, not the cable. Old price ₹2,499, now ₹1,899. Press Ctrl + P to print this page. Prices include GST.

<p><strong>Warning: charge the speaker fully before first use.</strong></p>
<p>It is the <em>charger</em> that must be original, not the cable.</p>
<p>Price: <del>₹2,499</del> <ins>₹1,899</ins></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>P</kbd> to print this page.</p>
<p><small>Prices include GST.</small></p>