Is it OK to use the tag for icons and not for italics?
Currently we have noticed that many people have been using the <i> tag for icons and not for italics. If we were still in the pre-HTML5 era that would be totally wrong.
According to the specification of the HTML5 <i> tag, it is now used for the text of an "alternative voice", such as transliterated foreign words, technical terms, and typefaces.
So if we use Icon Fonts, which are image fonts, the code will continue semantically correct, right?
9 answers
In HTML4, the tag <i> meant italics. Over the past decade, the web standards movement has struggled for developers to move to separate style structure, which is the responsibility of CSS. But it would be complicated to remove this tag. Even if it were taken out of the specification, no browser manufacturer in good conscience would eliminate the support, as this would break several already existing websites. So they gave "a little way": a new meaning for the element.
Translating from W3C markup guide :
Element i represents an excerpt of text highlighted from its context without conveying additional emphasis or importance, and for which the typographic convention of presentation is italicized text; for example, a term from one taxonomy, a technical term, an idiomatic expression from another language, a thought, or the name of a ship.
Does not say whether or not to be used for icons, as bootstrap does. In the field of marking semantics, there are always controversies.
Introduction
The first time I realized the use of the <i></i> tag to apply icons, more precisely those that appear in a font, was through Bootstrap.
Some examples are FontAwesome and Glyphish which use fonts to provide icons.
I can't say I agreed with the idea, but at the time I wasn't even thinking about it. It was a" victory " for them in terms of performance (performance):
-
ias an abbreviation for icon; - tag with a super small size compared to the others.
However, currently, even Bootstrap has left this practice and uses the <span></span> tag to display icons.
Officially
By what can be read on the W3C website , the <i></i> tag has a well-defined purpose:
Although previous versions of HTML defined the I element only in presentational terms, the element has now been given to the specific semantic purpose of representing the text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text.
Which translates to:
Although earlier versions of HTML defined element I only in terms of presentation, the element now has a specific semantic purpose of representing text "displacement of its engaging content without conveying any extra emphasis or importance, and for which the conventional typographical presentation is italic text".
Answer to question
So if we use Icon Fonts, which are image fonts, the code will remain semantically correct, right?
Technically there is no text inside the tag, so nothing will be read from it, which exists 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.
According to W3C, the tags <i> and <b> are not necessarily used as italics and bold.
See a coherent explanation and I believe you will know how to use it in the best way:
This other explains how you use for icons:
Semantically speaking, the tag <i> is used to represent text. If what we want to present is just an image and not text, then the tag <img> is the most suitable for this purpose. Usually icons appear in the document for the sake of presentation only, and therefore being a purely presentation artifact, they should be inserted with CSS.
Of course this is all very beautiful in theory, but in practical terms <i> turns out to be nice to put icon.
I've seen the use of <i> for icons, but I don't consider it semantic.
Icons do not fit the description of use of the tag <i>, so I still consider it more appropriate to use some element without semantic value. In case o <span>
According to W3C, the tag <i>, should be used to highlight part of the text inline (on the same line). The default is to format the text in italics.
Is being used to insert icons, instead of the tag <img> for pure typing economy and is not considered a good practice , because it does not improve performance and confuses the understanding of the code.
The same thing is to use for italic text, but I usually use it to create icons on my sites.
Some tags I call universal tags, like span, section and mostly the div tag, I use these tags for anything in html. It is not mandatory you follow the pattern, in the end you who chooses.
<em> applies text in italics in HTML5. But I think it's easier for you to edit a <span> with CSS, than to resort to tag. The <i> has not yet been discontinued, I think it is better to stop using it
The ideal would be to put all the formatting in CSS and leave only the basics in HTML. Then italic would be only font: italic And it would indicate icons.