What is the correct example of using the html <i> element?
At first, this question seems simple, of all the real-life examples I've seen, it is used to display icons. For example, twitter bootstrap icons .
However, when I search for a tag in google, the w3c school says it is intended for text in italics .
I am confused if used for italic text, why does everyone use it for icons? What is the proper use of this tag
It should be used to create italic style text. Most semantic uses for italic text are <em> , as it is supported by screen readers for emphasis.
<i> and <b> slowly dropping out of favor in favor of using CSS to style text and preserve <em> and <strong> for accessibility reasons.
I assume it was selected for the icons, as it is the closest element and makes a literal meaning (i.e. i = icon).
<i> was the old way to make text italic in HTML. The tag is now overridden in HTML5, and I believe TwitterBootstrap just used this convention for icons, but this is definitely not the standard way to make icons.
Because HTML has become perverted over the centuries.
The official "correct use" in HTML 4.01 for italic text.
The <i> discouraged because it does not contain semantic instructions about why the text is in italics.
To display italic text, use the <em> . (or another tag with the corresponding semantic meaning in combination with CSS)
Recently, people started using <i> tags for icons, because i stands for icon.