Dear Ms. FEWD,
I have noticed the last few years, that the “i” tag has been used to declare icons. What does this tag do? Does the “i” actually mean “icon”?
The <i>s have it
Before we separated content from presentation, the i tag it was actually meant to denote italics.
The HTML5 specification tried to redefine the use of this tag, and states: “The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.”
Then, we started thinking about this more, and realized that “i” wasn’t a great semantic notation of what this text actually was. The em tag was then introduced to denote emphasis, and developers realized there was no good, semantic use for the i tag, anymore.
Without a use, some companies like Twitter and Font Awesome, took it upon themselves to attempt to rewrite what the i tag meant, and they used it to represent “icon.” Issue is, the old use was never deprecated, and this new use was never defined in any official HTML documentation. Twitter Bootstrap seems to have seen the semantic error of their ways, and has updated this in version 3 to use the span tag for their icons, instead.
With some technology leaders still using it, does it mean it’s right? In a word: no. For starters, always remember: just because it renders, does not mean it’s right. Next, we need to remember that an icon is presentation and not content, so it can be done in nondescript tag like a span, or even with a pseudo-element or pseudo-class in your CSS. If this was content, you’d want to present it like an image, and add your descriptive alt tag for SEO and best practices.
What we want to ultimately avoid, within any front-end development, is using tags that have real semantic meaning around something that doesn’t fit their already-established definition.
Do you have a front end development question? Email Ms. FEWD or DM her on Twitter: @MsFEWD.