7. <b> vs <strong> and <i> vs <em>
The difference between purely visual styling and semantic importance
Real-life analogy
<b> is just making the voice heavier, whereas <strong> is shouting a warning about danger so that even blind people can understand that this is very important!
Explanation
Students often think <b> and <strong> are the same, but there is a deep difference:
<b>(Bold): Only makes the text thick/bold. It carries no special semantic meaning.<strong>(Strong Importance): It makes the text bold and also tells search engines and screen readers that this is extremely important information or a warning.<i>(Italic): Only slants the text (for example, a word from a foreign language).<em>(Emphasis): Slants the text and also puts special stress (Emphasis) on that word when spoken.
Golden rules
- For Search Engine Optimization (SEO) and accessibility, always prefer
<strong>and<em>.
Common mistake
Using only <b> in a warning message. Screen readers used by visually impaired people don't stress <b>; they stress only <strong>.
Example code
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px; line-height: 1.8;">
<p>This is only <b>visual bold (b)</b>.</p>
<p>Caution: This is an <strong>extremely important warning (strong)</strong>!</p>
<p>This is only an <i>italic word (i)</i>.</p>
<p>Please pay <em>special attention (em)</em> to this!</p>
</body>
</html>Quick quiz
Which semantic tag marks a word as 'extremely important' for screen readers and search engines?
- <b>
- <bold>
- <strong>
- <important>
Show answer
Answer: <strong>
The <strong> tag makes the text bold and also raises its semantic importance.