In HTML, what is the difference between <strong> and <b>, and between <em> and <i>, and what does choosing correctly actually change?
answer
- two pairs, two different jobs
- one pair carries importance
- attention versus alternative voice
- default announcement usually identical
- no meaning means span plus CSS
basics
~20 sThe strong element marks importance and em marks stress emphasis that changes a sentence's meaning. The b and i elements set text apart without importance: b draws attention, i signals an alternative voice such as a foreign phrase or technical term.
solid answer
~50 s`<strong>` and `<em>` carry meaning. `<strong>` says the content is important, serious or urgent; `<em>` is stress emphasis, so moving it changes how the sentence reads — "call me *tomorrow*" is not "call *me* tomorrow". `<b>` and `<i>` are the non-semantic pair the spec deliberately kept. `<b>` is "bring attention to": a keyword or a product name set apart with no extra importance. `<i>` is an alternative voice or mood: a foreign phrase (pair it with `lang`), a technical term, a taxonomic name, a thought. All four look the same as the browser defaults — bold or italic — and in practice most screen readers announce none of them differently unless the user turns emphasis reporting on. So pick by meaning; if there is no meaning at all and you only want a bold look, that is a `<span>` and a CSS class.
code
html · 4 lines<p><strong>Warning:</strong> unplugging the drive now can corrupt it.</p>
<p>I said <em>Tuesday</em>, not Thursday.</p>
<p>The <b>Acme Pro 9</b> ships with two cables.</p>
<p>The sauce is finished <i lang="fr">à la minute</i>.</p>go deeper
Be ready to say plainly that strong and em carry meaning while b and i do not, and to give one concrete example of each rather than reciting definitions.
Explain the mechanics: em is stress that changes the sentence's reading, strong is importance, both nest to increase degree, and b/i are the spec's non-semantic set-apart pair with narrow definitions.
Show production judgment by correcting the myth that these tags change screen-reader speech by default, and by explaining what correct markup actually buys — meaning that survives restyling, translation and extraction.
Own the standard: decide how your codebase encodes emphasis so intent is reviewable, keep purely visual weight in CSS classes, and make the em-versus-strong rule cheap to follow in components and content authoring.
## Four elements, two default looks A browser's own default stylesheet renders `<strong>` and `<b>` bold, and `<em>` and `<i>` italic. Because the pixels come out identical, people assume two of the four are leftovers that should never be used. They are not. All four are defined in the current HTML specification with distinct meanings, and the split is not "old versus new" — it is between elements that express **importance or emphasis** and elements that merely mark a run of text as **set apart in kind**. ## `<strong>` — importance `<strong>` means the content is important, serious, or urgent. The classic uses are the operative words of a warning, the "Do not" in an instruction, or the part of a legal notice a reader must not miss. Nesting increases relative importance: `<strong>Warning: <strong>do not</strong> unplug</strong>` says the inner phrase matters most. Importance is about the content's standing in the document, not about how loudly it is said. ## `<em>` — stress emphasis `<em>` marks the word a speaker would stress, and because stress changes what a sentence means, moving the element changes the sentence: ```html <p><em>Cats</em> are cute.</p> <!-- as opposed to dogs --> <p>Cats <em>are</em> cute.</p> <!-- contradicting someone who said otherwise --> ``` This is the sharpest test in the group: if relocating the tags would change the reading, `<em>` is the right element. Nested `<em>` increases the degree of stress. ## `<b>` — bring attention to The spec defines `<b>` as text "to which attention is being drawn for utilitarian purposes without conveying any extra importance" — keywords in a document abstract, product names in a review's opening line, the lead sentence of an article. It is explicitly described as a last resort when no more specific element fits, which is very different from being forbidden. If your author intent really is "set this apart visually, it is not more important", `<b>` is the honest markup. ## `<i>` — alternative voice or mood `<i>` marks idiomatic text: a phrase in another language, a technical term on first mention, a transliteration, a taxonomic designation, a character's inner thought, a ship's name. For a foreign phrase, add the language so the text is announced with the right pronunciation rules: ```html <p>The dish is served <i lang="fr">à la minute</i>.</p> ``` ## What assistive technology actually does This is where candidates over-promise. By default, common screen readers do not change how `<strong>` or `<em>` content is spoken — no extra word, no pitch change. Reporting emphasis or font attributes is an opt-in verbosity setting, and users who want it turn it on. The payoff of correct markup is therefore not "the screen reader shouts". It is that the meaning is recorded in the document rather than in a stylesheet: it survives restyling, reader modes, translation, text extraction and search indexing, and it makes intent reviewable by the next developer. Treat any claim that `<strong>` "makes it louder for blind users" as folklore. ## A decision test you can say out loud 1. Would removing the element change what the sentence means, or how urgent it is? Use `<em>` (meaning) or `<strong>` (urgency/importance). 2. Is the text merely different in kind — a name, a keyword, a foreign phrase — while carrying no extra weight? Use `<b>` or `<i>`. 3. Is there no textual meaning at all and you just want a visual treatment? That is a `<span>` and a class; styling is CSS's job, not HTML's. ## Common mistakes Reaching for `<em>` because you want italics on the title of a book — the title of a work has its own element, `<cite>`. Wrapping a whole paragraph in `<strong>`, which flattens importance to nothing: if everything is important, nothing is. Marking every other word `<strong>` for rhythm. And asserting that `<b>` and `<i>` were removed from the language — they were redefined, not dropped, and an interviewer who knows the spec will hear the difference between "deprecated" and "redefined".
- What does nesting one <strong> inside another mean in HTML?Nesting raises the relative importance of the inner content. `<strong>Warning: <strong>do not</strong> unplug</strong>` marks the whole phrase as important and the inner words as the most important part of it. `<em>` nests the same way, increasing the degree of stress. Browsers do not render the levels differently by default; the distinction lives in the document's meaning.
- Are <b> and <i> deprecated, and how would you defend using one in a review?Neither is deprecated. Both are defined in the current spec with narrow meanings: `<b>` for text drawn to attention without added importance, `<i>` for an alternative voice or mood. The defence is to name the definition and show the intent — a product name set apart is `<b>`, a foreign phrase is `<i lang="…">`. What is wrong is using either as a shortcut for styling.
- If the markup is purely visual — a bold run with no meaning — what should you write instead?A `<span>` with a class, styled in CSS. HTML elements should record what the content is, and inventing a semantic where none exists is as misleading as omitting one. This is also the honest answer when a designer wants a bold word for rhythm rather than for importance.
saying these in an interview costs you the question
- Says b and i were removed from the language
- Claims screen readers always announce strong text louder
- Uses em whenever italics are wanted
- Treats strong as simply meaning bold
- Wraps whole paragraphs in strong for emphasis