What's the difference between <b>
and <strong>
, <i>
and <em>
in HTML/XHTML? When should you use each?
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.
The <strong> tag should be used to indicate strong importance, seriousness, or urgency, like to indicate key phrases in a text for someone skimming it. The <em> tag should be used to represent stress emphasis, like when you'd read the emphasized text in a different tone of voice.
It indicates how something must be understood. The difference between these tags is that <b> makes the text look bold only visually, whereas the <strong> tag also gives a semantic emphasize indicating a meaningful word or a text section.
i has the purpose of presenting something in italicised style. em has the purpose of giving emphasis to the content.
They have the same effect on normal web browser rendering engines, but there is a fundamental difference between them.
As the author writes in a discussion list post:
Think of three different situations:
"Bold" is a style - when you say "bold a word", people basically know that it means to add more, let's say "ink", around the letters until they stand out more amongst the rest of the letters.
That, unfortunately, means nothing to a blind person. On mobile phones and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.
<b>
is a style - we know what "bold" is supposed to look like.
<strong>
however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people) or be represented by an underline (since you can't bold a bold) on a Palm Pilot.
HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web." <strong>
is semantic—it describes the text it surrounds (e.g., "this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed (e.g., "this text should be bold").
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With