What is the proper use case for html <i> element? [duplicate]

Question

At first this question seem simple, from all the real life examples I have seen, is used for displaying icons. For example the twitter bootstrap icons.

However, when I search tag in google, the w3c school says is for italic text.

I am confused, if is used for italic text, why is everyone using it for icons? What is the proper use of this tag??

Cromagnon

What about going to the source? – Pickings

Thank everyone for answering, as you notified I realize that there is already another question for this and it has been answered. So I'll just go ahead and read that. The result I am looking for is really a good way to represent icons, since a lot of big names are using the <i> tag out side of the spec it creates confusion. – Cromagnon

Answer 1

It should be used to make text styled italic. Most semantic uses for italic text are <em>, as it is supported by screen-readers for emphasis.

<i> and <b> are slowly going out of fashion in favour of using CSS to style text, and preserving <em> and <strong> for accessibility reasons.

I guess that it was selected for icons since it is the closest element and makes alphabetic sense (i.e. i = icon).

Endmost

During recent studies I also learn that using <i> for icons is a bad idea. HTML should contain less non-semantic contents and icons being part of it. Should use css pseudo elements to display icons whenever possible. – Cromagnon

Answer 2

<i>  was the old way to make text italic in HTML.  

The tag has now been redefined in HTML5 and I believe TwitterBootstrap just used this convention for icons but it is definitely not a standard way to do icons.

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

Saintmihiel

Which specification deprecated the i element? – Bolingbroke

w3.org/International/questions/qa-b-and-i-tags - while it doesn't explicity state deprecated I believe the tags should not be used for italic, especially since the HTML 5 specification has redefined the meaning of <i> – Saintmihiel

Answer 3

Because HTML has become perverted over the ages.

Official "proper use" in HTML 4.01 is for italic text.

Kaon

Answer 4

The <i> tag is discouraged, because it provides no semantic indication about why the text is italic.

To display italic text, the <em> tag should be used. (or a different tag with appropriate semantic meaning, combined with CSS)

More recently, people have started using <i> tags for icons, because i stands for icon.

Scad