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

+8
html icons italic
source share
4 answers

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).

+5
source share
 <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.

http://w3.org/International/questions/qa-b-and-i-tags

+2
source share

Because HTML has become perverted over the centuries.

The official "correct use" in HTML 4.01 for italic text.

+2
source share

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.

+1
source share

All Articles