Now we've noticed that a lot of people are using the <i> tag for icons, not for italics. If we were still in the pre-HTML5 era this would be totally wrong.
According to the specification of the <i> tag in HTML5, 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 typographies, the code will remain semantically correct, right?
In HTML4, the <i> tag meant italic. In the last decade, the web standards movement has struggled for developers to move away from CSS style structure. But it would be tricky to remove that tag. Even if it were removed from the specification, no browser vendor would slam the support, as this would break several existing sites. Then they gave a "way": a new meaning for the element.
Translating w3c markup guide :
The element i represents an excerpt of highlighted text from its context without conveying additional emphasis or importance, and for which the typographic presentation convention is italicized text; for example, a term of a taxonomy, a technical term, an idiomatic expression of another language, a thought or the name of a ship.
Does not say whether or not to be used for icons, as does the bootstrap. In the field of semantic markup, there is always controversy.
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; 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 ".
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.
According to W3C, the <i> and <b> tags are not necessarily used as Italic and Bold.
See a coherent explanation and I believe you will know how to use the best form:
This other explains how you use it for icons:
Semantically speaking, the <i> tag is used to represent text. If what we want to present is just an image and not text, then the <img> tag is the most suitable for this purpose. Usually the icons appear in the document for presentation only, and therefore being an artifact merely for presentation, should be inserted with CSS.
Of course, this is all very nice in theory, but in practical terms <i> turns out to be nice to put icons on.
I've seen the use of <i> for icons, but I do not consider it semantic.
Icons do not fit the description of use of the <i> tag, so I still consider it more appropriate to use some element with no semantic value. In the case of <span>
According to W3C, the <i> tag should be used to highlight part of the inline text (on the same line). The default is to format the text in italic.
Is being used to insert icons instead of the <img> tag for pure typing and is not considered a good practice , as it does not improve performance at all and confuses understanding of the code .
The same is true for italicized text, but I usually use it to create icons on my websites.
Some tags I call universal tags, like span, section and especially the div tag, I use these tags for anything in html. You are not required to follow the pattern, in the end you choose.
<em> applies emphasis (italic) text to HTML5. But I think it's easier for you to edit a <span> with CSS than to use the tag. <i> has not been discontinued yet, I think it's best to stop using it
The ideal would be to put all the formatting in CSS and leave only the basics in HTML. So italic would only font: italic And it would display icons.