Most reasonably savvy web developers will tell you to use
<em> instead of
<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.
The popular misconception is that
<i> were deprecated and replaced by
<em>. Not true.
<i> are still alive today as valid HTML5 tags and
<em> have actually been around since HTML1. In other words, all 4 have always been valid, side by side.
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
<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.
HTML4 deprecated many purely presentational elements (such as
<font>) for the very reason stated above. But oddly, it didn’t actually deprecate
<i> — though they were still discouraged. That’s when
<em> became more widely used. They had the same default appearance of
<i>, but they weren’t just presentational cues — they were defined to actually convey meaning. In a word, they were “semantic”.
The term “semantic” became the rallying warcry of HTML5. As a result, you’d think it would have finally deprecated
<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”.
<em> were tweaked as well, though their changes were relatively minor. HTML5 Doctor has a good article delving into the finer points.
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
<i> is a little wacky.