Most reasonably savvy web developers will tell you to use <strong> and <em> instead of <b> and <i>. And generally speaking, they’re right… but they don’t really know the whole story. So join me now as I take you on a fantastic journey into the thrilling history of these HTML elements!
Yeah, it’s not really that exciting.
But it is a mildly interesting peek at the evolution of semantic HTML. And clearing up misconceptions is nice. So there you go.
Always Been There
The popular misconception is that <b> and <i> were deprecated and replaced by <strong> and <em>. Not true. <b> and <i> are still alive today as valid HTML5 tags and <strong> and <em> have actually been around since HTML1. In other words, all 4 have always been valid, side by side.
Separation of Concerns
In the early years, web developers happily used <b> for bold and <i> for italics. Simple. But as the web matured, so did best practices. Specifically, good developers started separating structure from presentation: HTML for structure, CSS for presentation (AKA styling). This approach — commonly referred to as separation of concerns — is a popular one, and not just in the realm of web development.
This is when the <b> and <i> tags (and others like <font>) lost their initial appeal. Their sole purpose was presentational, but such things didn’t belong in HTML anymore. That was CSS’s job now.
Discouraged, not Deprecated
HTML4 deprecated many purely presentational elements (such as <font>) for the very reason stated above. But oddly, it didn’t actually deprecate <b> and <i> — though they were still discouraged. That’s when <strong> and <em> became more widely used. They had the same default appearance of <b> and <i>, but they weren’t just presentational cues — they were defined to actually convey meaning. In a word, they were “semantic”.
Everything Semantic
The term “semantic” became the rallying warcry of HTML5. As a result, you’d think it would have finally deprecated <b> and <i>. Surprisingly, no. They dodged deprecation yet again, this time by being redefined. HTML5 now defines <b> as “stylistically offset” and <i> as “alternate voice”. <strong> and <em> were tweaked as well, though their changes were relatively minor. HTML5 Doctor has a good article delving into the finer points.
Conclusion
And there you have it. If the current state of things sounds like a crazy game of semantic hair-splitting, well, I don’t blame you. Overall though, I’m on board with semantic HTML’s evolution… even if the story of <b> and <i> is a little wacky.