Detailed explanation
The main difference is the meaning these elements give to text, not their default appearance. Browsers normally render <b> and <strong> in bold, and <i> and <em> in italics. However, calling <b> and <i> “purely presentational” is an outdated simplification: modern HTML gives them specific purposes. Choose the element according to what the text means, and use CSS when you only want a visual effect. This distinction matters because HTML describes content while CSS controls its presentation.
<strong> marks strong importance, seriousness, or urgency. For example, in <p><strong>Warning:</strong> This action is <em>irreversible</em>.</p>, the warning label is important, while “irreversible” receives stress emphasis. <em> indicates emphasis that can affect how a sentence is understood or spoken. Compare “I <em>only</em> borrowed the book” with “I only borrowed <em>the book</em>”: the stressed words change the intended contrast. Nested <strong> elements can indicate greater importance, while nested <em> elements increase the degree of emphasis.
<b> draws attention to text without giving it extra importance or indicating an alternate voice or mood. Typical uses include keywords in a summary or product names in a review. <i> marks text in an alternate voice or mood, or text conventionally offset from the surrounding prose, such as a technical term, a taxonomic name, or a character’s thought. Neither element should replace a more suitable element: use <cite> for the title of a work, for example, rather than selecting <i> merely because titles are often italicised.
Under the hood, these are distinct elements in the DOM, and browser styles provide their familiar appearance. CSS can override that appearance without changing their HTML meaning. Their semantics can support accessibility, but screen readers do not universally announce <strong> or <em> differently; behaviour depends on the software and settings. In interviews, demonstrate that you separate meaning from styling, avoid promising a particular screen-reader pronunciation, and select tags based on the author’s intent rather than how bold or italic the text should look.
Key points to remember
- <strong> conveys importance, seriousness, or urgency; <em> conveys stress emphasis.
- <b> draws attention without adding importance; it is not simply a meaningless styling tag.
- <i> marks an alternate voice, mood, or conventionally offset text, such as a technical term.
- Default bold and italic rendering can be changed with CSS without changing semantics.
- Semantic markup supports accessibility, but different spoken output is not guaranteed.
Common mistakes candidates make
- Claiming that <b> and <i> have no semantic purpose in modern HTML or are deprecated.
- Choosing <strong> or <em> solely to make text bold or italic instead of using CSS.
- Claiming that every screen reader changes its voice or announces importance for <strong> and <em>.
Likely follow-up questions
How should I make text bold if it has no special meaning?
Apply CSS such as font-weight: bold to an existing appropriate element. If you need a wrapper only for styling, use a <span> with a class rather than adding importance with <strong>.
Can <strong> and <em> be used together?
Yes, text can be both important and stress-emphasised, as in <strong>You must <em>not</em> share this password.</strong>. Use nesting because both meanings apply, not simply to obtain bold italic text.
Are <b> and <i> still valid HTML?
Yes, both are valid elements with defined meanings in modern HTML. Use them when those meanings fit, but prefer more specific markup such as <dfn> for a term being defined or <cite> for a work’s title.
Interview tip: Lead with meaning versus appearance, explain each pair, and use the warning example while qualifying screen-reader behaviour.