Should I use i tag for icons instead of span

Question

Facebook s HTML and Twitter Bootstrap HTML  before v3  both use the  lt i gt  tag to display icons  However  from the HTML5 spec   The I element represents a span of text in an alternate voice or mood  or otherwise offset from the normal prose  such as a taxonomic designation  a technical term  an idiomatic phrase from another language  a thought  a ship name  or some other prose whose typical typographic presentation is italicized   Why are they using  lt i gt  tag to display icons  Isn t it a bad practice  Or am I missing something here  I am using span to display icons and it seems to be working for me until now  Update  Bootstrap 3 now uses span for icons  Official Doc

User · Answer

My guess  Because Twitter sees the need to support legacy browsers  otherwise they would be using the  before    after pseudo-elements   Legacy browsers don t support those pseudo-elements I mentioned  so they need to use an actual HTML element for the icons  and since icons don t have an  exclusive  tag  they just went with the  lt i gt  tag  and all browsers support that tag   They could ve certainly used a  lt span gt   just like you are  which is TOTALLY fine   but probably for the reason I mentioned above plus the ones mentioned by Quentin  is also why Bootstrap is using the  lt i gt  tag   It s a bad practice when you use extra markup for styling reasons  that s why pseudo-elements were invented  to separate content from style    but when you see the need to support legacy browsers  sometimes you re forced to do these kind of things   PS  The fact that icons start with an  i  and that there s an  lt i gt  tag  is completely coincidental

User · Answer

I thought this looked pretty bad - because I was working on a Joomla template recently and I kept getting the template failing W3C because it was using the  lt i gt  tag and that had deprecated  as it s original use was to italicize something  which is now done through CSS not HTML any more   It does make really bad practice because when I saw it I went through the template and changed all the  lt i gt  tags to  lt span style  font-style italic  gt  instead and then wondered why the entire template looked strange   This is the main reason it is a bad idea to use the  lt i gt  tag in this way - you never know who is going to look at your work afterwards and  assume  that what you were really trying to do is italicize the text rather than display an icon   I ve just put some icons in a website and I did it with the following code   lt img class  icon  src  electricity jpg  alt  Electricity  title  Electricity  gt    that way I ve got all my icons in one class so any changes I make affects all the icons  say I wanted them larger or smaller  or rounded borders  etc   the alt text gives screen readers the chance to tell the person what the icon is rather than possibly getting just  text in italics  end of italics   I don t exactly know how screen readers read screens but I guess it s something like that   and the title also gives the user a chance to mouse over the image and get a tooltip telling them what the icon is in case they can t figure it out   Much better than using  lt i gt  - and also it passes W3C standard

User · Answer

I take a totally different approach to everyone else s answers here altogether  Let me prefix my solution and argue by stating that sometimes standards and conventions are meant to be broken  especially in the context of the standard HTML lexical tag definitions    There s nothing to stop you from creating custom elements that are self-descriptive to it s very purpose    Both modern browsers and even IE 6   w  shim  can support things like    lt icon class  plus  gt    or   lt icon-add gt    Just make sure to normalize the tag    icon   display block  margin 0  padding 0  border 0          and use a shim if you need to support IE9 or earlier  see post below    Check out this StackOverflow Post   Is there a way to create your own html tag in HTML5  To further my argument  both Google s Angular Directives and the new Polymer projects utilize the concept of custom HTML tags

User · Answer

Why are they using  lt i gt  tag to display icons     Because it is    Short i stands for icon  although not in HTML       Is it not a bad practice     Awful practice  It is a triumph of performance over semantics

User · Answer

I also found this to be useful when i wanted to place an icon with absolute positioning inside a link  lt a gt  tag    I thought about the  lt img gt  tag first  but default styling of those tags inside links typically have border styling and or shadow effects  Plus  it feels wrong to use an  lt img gt  tag without defining an  src  attribute whereas i m using a background-image style sheet declaration so that the image doesn t ghost and drag   At this point you re thinking of tags like  lt span gt  or  lt i gt  - in which case  lt i gt  makes so much sense as this type of icon    All in all i think its benefit besides being intuitive is that it requires minimal style sheet adjustments to make this tag work as an icon

User · Answer

I m jumping in here a little late  but came across this page when pondering it myself  Of course I don t know how Facebook or Twitter justified it  but here is my own thought process for what it s worth  In the end  I concluded that this practice is not that unsemantic  is that a word    In fact  besides shortness and the nice association of  quot i is for icon  quot  I think it s actually the most semantic choice for an icon when a straightforward  lt img gt  tag is not practical  1  The usage is consistent with the spec  While it may not be what the W3 mainly had in mind  it seems to me the official spec for  lt i gt  could accommodate an icon pretty easily  After all  the reply-arrow symbol is saying  quot reply quot  in another way  It expresses a technical term that may be unfamiliar to the reader and would be typically italicized    quot Here at Twitter  this is what we call a reply arrow  quot   And it is a term from another language  a symbolic language  If  instead of the arrow symbol  Twitter used  lt i gt shout out lt  i gt  or  lt i gt  Japanese character for reply  lt  i gt   on an English page   that would be consistent with the spec  Then why not  lt i gt  reply arrow  lt  i gt    I m talking strictly HTML semantics here  not accessibility  which I ll get to   As far as I can see  the only part of the spec explicitly violated by icon usage is the  quot span of text quot  phrase  when the tag doesn t contain text also   It is clear that the  lt i gt  tag is mainly meant for text  but that s a pretty small detail compared with the overall intent of the tag  The important question for this tag is not what format of content it contains  but what the meaning of that content is  This is especially true when you consider that the line between  quot text quot  and  quot icon quot  can be almost nonexistent on websites  Text may look like more like an icon  as in the Japanese example  or an icon may look like text  as in a jpg button that says  quot Submit quot  or a cat photo with an overlaid caption  or text may be replaced or enhanced with an image via CSS  Text  image - who cares  It s all content  As long as everyone - humans with impairments  browsers with impairments  search engine spiders  and other machines of various kinds can understand that meaning  we ve done our job  So the fact that the writers of the spec didn t think  or choose  to clarify this shouldn t tie our hands from doing what makes sense and is consistent with the spirit of the tag  The  lt a gt  tag was originally intended to take the user somewhere else  but now it might pop up a lightbox  Big whoop  right  If someone had figured out how to pop up a lightbox on click before the spec caught up  they still should have used the  lt a gt  tag  not a  lt span gt   even if it wasn t entirely consistent with the current definition - because it came the closest  and was still consistent with the spirit of the tag   quot something will happen when you click here quot    Same deal with  lt i gt  - whatever type of thing you put inside it  or however creatively you use it  it expresses the general idea of an alternate or set-apart term  2  The  lt i gt  tag adds semantic meaning to an icon element  The alternative option to carry an icon class by itself is  lt span gt   which of course has no semantic meaning whatsoever  When a machine asks the  lt span gt  what it contains  it says   quot I don t know  Could be anything  quot  But the  lt i gt  tag says   quot I contain a different way of saying something than the usual way  or maybe an unfamiliar term  quot  That s not the same as  quot I contain an icon  quot  but it s a lot closer to it than  lt span gt  got  3  Eventually  common usage makes right  In addition to the above  it s worth considering that machine readers  whether search engine  screen reader  or whatever  may at any time begin to take into account that Facebook  Twitter  and other websites use the  lt i gt  tag for icons  They don t care about the spec as much as they care about extracting meaning from code by whatever means necessary  So they might use this knowledge of common usage to simply record that  quot there may be an icon here quot  or do something more advanced like triggering a look into the CSS for a hint to meaning  or who knows what  So if you choose to use the  lt i gt  for icons on your website  you may be providing more meaning than the spec does  Moreover  if this usage becomes widespread  it will likely be included in the spec in the future  Then you ll be going through your code  replacing  lt span gt s with  lt i gt  s  So it may make sense to get on board with what seems to be the direction of the spec  especially when it doesn t clearly conflict with the current spec  Common usage tends to dictate language rules more than the other way around  If you re old enough  do you remember that  quot Web site quot  was the official spelling when the word was new  Dictionaries insisted there must be a space and Web must be capitalized  There were semantic reasons for that  But common usage said   quot Whatever  that s stupid  I m using  website  because it s more concise and looks better  quot  And before long  dictionaries officially acknowledged that spelling as correct  4  So I m going ahead and using it  So   lt i gt  provides more meaning to machines because of the spec  it provides more meaning to humans because we easily associate  quot i quot  with  quot icon quot   and it s only one letter long  Win  And if you make sure to include equivalent text either inside the  lt i gt  tag or right next to it  as Twitter does   then screen readers understand where to click to reply  the link is usable if CSS doesn t load  and human readers with good eyesight and a decent browser see a pretty icon  With all this in mind  I don t see the downside

User · Answer

Quentin s answer clearly states that i tag should not be used to define icons    But  Holly suggested that span has no meaning in itself and voted in favor of i instead of span tag   Few suggested to use img as it s semantic and contains alt tag  But  we should not also use img because even empty src sends a request to server  Read here  I think  the correct way would be    lt span class  icon-fb  role  img  aria-label  facebook  gt  lt  span gt   This solves the issue of no alt tag in span and makes it accessible to vision-impaired users  It s semantic and not misusing   hacking   any tag

[html] Should I use <i> tag for icons instead of <span>?

Examples related to html

Examples related to semantic-markup