What\'s the difference between and
,
and
in HTML/XHTML? When should you use
I'm going to hazard a historical and practical hot take here:
Yes, according to specifications, had a semantic meaning in HTML4 and
had a strictly presentational meaning.
Yes, when HTML5 came along, new semantic meaning that was slightly different was introduced for b
and i
.
Yes, the W3C recommends — basically — TL,DR; don't use b and i.
You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages. You should not use b and i tags if there is a more descriptive and relevant tag available.
BUT:
The real world internet has massive loads of existing HTML that is never going to get updated. The real world internet has to account for content generated and copy and pasted between a vast network of software and CMS systems that all have different developer teams and were built in different eras.
So if you're writing HTML or building a system that writes HTML for other people — sure — definitely use instead of
to mean "strongly emphasized" because it's more semantically correct.
But really, the on-the-ground reality is that the semantic and stylistic meaning of and
have merged over time out of necessity.
If I'm building a CMS that allows any pasting of styled text, I need to plan both for people who are pasting in and mean "strongly emphasized" and for people who are pasting in
and mean "make this text bold". It might not be "right", but it's how the real world works at this moment in time.
And so, if I'm writing a stylesheet for that site, I'm probably going to end up writing some styles that look like this:
b,
strong {
font-weight: 700;
/* ... more styles here */
}
i,
em {
font-style: italic;
/* ... more styles here */
}
Or, I'm going to rely on the browser defaults, which do the same thing as the code above in every modern browser I know of.
Or, I might be one of probably millions of sites that use normalize.css, which takes care to ensure that b and strong are treated the same.
There's such a massive ocean of HTML out there in the world already that works off of this expectation, I just can't imagine that b
will EVER be depreciated in favor of strong
or that browsers will ever start displaying them differently by default.
So that's it. That's my hot take on semantics, history and the real world. Are b/i and strong/em the same? No. Will they probably both exist and be treated as identical in almost every situation until the collapse of modern civilization? I think, yes.