The first time I realized the use of the
<i></i> tag to apply icons, more properly those that appear in a font (font), was through Bootstrap.
Some examples are FontAwesome and Glyphish that use fonts to provide icons.
I can not say that I agreed with the idea, but at the time I did not even think badly. It was a "win" for them in terms of performance:
i as an abbreviation for icon;
- tag with a very small size compared to the others.
However, until Bootstrap has already left this practice at the moment, it uses the
<span></span> tag to display icons.
Using what can be read on the W3C site , the
<i></i> tag has a goal well defined:
Although previous versions of HTML defined the only element in presentational terms, the element has now been given the semantic purpose of representing text. presentation is italic text ".
That translates to:
Although earlier versions of HTML have defined element i only in terms of presentation, the element now has specific semantic purpose of representing text "scrolling of its surrounding content without transmitting any extra emphasis or importance, and for which the typographic presentation conventional is italic text ".
Answer to question
So if we use Icon Fonts, which are image typographies, the code will remain semantically correct, right?
Technically there is no text within the tag, so nothing is read from it, which is in the particular case of using this tag to display icons is a visual representation of an image that is being applied via CSS.
Semantically is wrong because the tag is not representing text.