650

Facebook's HTML and Twitter Bootstrap HTML (before v3) both use the <i> 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 <i> 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 uses span for icons. Official Doc

Bootstrap 5 is back to i. Official doc

user16217248
  • 3,119
  • 19
  • 19
  • 37
Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • 5
    Example: The reply arrow below tweets on Twitter: ``. – Kijewski Jun 21 '12 at 09:33
  • also facebook uses the same tag to display arrows – Dinesh Venkata Mar 06 '13 at 11:17
  • _If_ you need to use an HTML element to display an icon, then there's no reason _not_ to use `` over ``. Both aren't great, so you may as well use the shorter one. – Christian Apr 17 '13 at 14:36
  • 3
    Why shouldnt `` be used ? – Jashwant Apr 17 '13 at 15:17
  • 7
    Seems to me that for sematics and accessibility, img tag should always be used for icons, with the alt text. – nroose Mar 10 '14 at 17:23
  • 14
    @nroose My take on this is that the images used for icons are not part of the content, but of the page's style, (unlike, for example, a picture of a cow on the wikipedia page about cows). Therefore they should be defined in the css, not as an image in an img tag. – JimmyMcHoover Oct 11 '14 at 12:12
  • 1
    That's an interesting take. Actually, I don't have a problem with css for style, and sometimes that involves images, though it is a bit awkward with the image being the "background" image, rather than the foreground. Can you comment on accessibility? – nroose Oct 13 '14 at 17:17
  • Just adding w3c's take on <i> (and <b>) tag, see https://www.w3.org/International/questions/qa-b-and-i-tags – pfrandsen Mar 26 '16 at 16:42
  • This is in regard to using it for layout purposes where it shouldn't be used ever. CSS is for that. This says nothing about using it for other reasons. – Wannes Apr 14 '16 at 12:23
  • 2
    This is a fairly interesting thread/question now, considering Bootstrap moved to using span, Twitter is now using span, and Facebook is using mostly span but some remnants of i. (Twitter using icon fonts and Facebook using background-image) – Seanevd May 05 '17 at 17:04
  • 18
    I don't think semantic decisions in HTML5 should be considered "opinion-based." – Aaron Aug 01 '17 at 13:38
  • @onsmith, you can vote to reopen. – Jashwant Aug 01 '17 at 16:46
  • 3
    It's a shame this has been closed because I believe the true answer has not yet been given. The truth is that `` is semantically defined as a range of text. An icon is not a range of text. `` is defined as a generic container for phrasing content. An icon could fit within this definition. The global `class` attribute is designed to extend the semantics of HTML elements, and is not strictly reserved for styling. Therefore, one should be able to objectively conclude that `` is the only semantically correct answer for defining icons within the HTML5 specification. – crush Dec 18 '20 at 14:56

7 Answers7

673

Why are they using <i> 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.

Parris Varney
  • 11,320
  • 12
  • 47
  • 76
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 97
    Its my first day to learn twitter's bootstrap and it feels bad that they are not following best practices. – Jashwant Jun 21 '12 at 09:35
  • 29
    some people even go further and misuse other elements, like `` = tooltip and so on... wanna help me found ATSMOHE? "Against the semantic misuse of HTML-Elements" – Christoph Jun 21 '12 at 09:36
  • 21
    These websites have millions of pages viewed each day. If they save 100 bytes of data each time a client request a page with this practice, they save a significant amount of bandwidth. – Dalmas Jun 21 '12 at 09:40
  • 72
    To save 100 bytes they would have to include 16 icons and **not enable compression**. – Quentin Jun 21 '12 at 09:41
  • 2
    You could save the same bandwidth by simply using background images and padding. – Chris Nov 15 '13 at 02:59
  • why w3c validator is not giving error on ? – Muneem Habib May 11 '15 at 05:03
  • 4
    @MuneemHabib — Because it can't tell that it isn't being used to mean *italic* but is being abused to mean *icon*. All it knows is that there is an `i` elements somewhere that an `i` element is allowed and that it has a `class` attribute (which is also allowed). – Quentin May 11 '15 at 08:51
  • 9
    With the use of [ligatures](http://alistapart.com/article/the-era-of-symbol-fonts), using the `i` tag to display icons is semantic. In fact, Google suggests the use of the `i` tag with ligatures in it's [Material icons guide](http://google.github.io/material-design-icons/#icon-font-for-the-web). – Aust Jul 06 '15 at 18:10
  • 5
    @RayLoveless—Yes and they explain their use of the `i` tag as such: _"You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the `` tag for brevity, but using a `` is more semantically correct)."_ - [Source](http://fortawesome.github.io/Font-Awesome/examples/) – Mark Kimitch Feb 26 '16 at 19:55
  • 3
    @Aust Why is using `i` with ligatures semantic? Basing the rendering on the text content of the tag doesn't change the fact that the meaning of the `i` tag is being either ignored or distorted. – amoe Sep 02 '16 at 12:20
  • 3
    @amoe From [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i): `The HTML Element represents a range of text that is set off from the normal text for some reason` -- According to that definition, using ligatures in `i` tags is perfectly valid. `face` contains a range of text for the reason to display a ligature. ... I would agree however, that these `i` tags should be kept in-line with other text as to fulfill the "set off from the normal text" part of the definition. – Aust Sep 02 '16 at 15:55
  • 2
    @user1712691, It isn't deprecated in HTML5 (and I don't think it's ever been). – Michael Nov 04 '16 at 16:41
  • 2
    @PrachiMishra - For the reasons described in *this* answer. – Quentin Nov 27 '18 at 09:25
  • A use of a `button` tag when trying to implement a button tag would make much more sense to me. – Jonny Apr 09 '19 at 09:04
  • @Jonny — A button comes with all sorts of interactive semantics. It is a dreadful element to use to display an icon. – Quentin Apr 09 '19 at 09:05
  • I could agree with icons not having to be interactive. Someone just implemented a open-menu-button using the `i` tag. – Jonny Apr 09 '19 at 09:12
  • @Jonny — Then advising them to use a button would be good advice, but it's a recommendation that doesn't make any sense in the context of this answer or question. – Quentin Apr 09 '19 at 09:13
  • some misconceptions here, `i` *standed* for italic in past HTML versions, in HTML5 is defined as an alt text, as Aust said. It's never been deprecated, but `encouraged to consider whether other elements might be more applicable than the i element, for instance the em element`. – Andre Figueiredo Feb 28 '20 at 19:39
  • 1
    i is semantic. People "created" a standard that it stands for icon and so started using it. There's nothing bad: in fact, it's good and semantic. –  Mar 31 '20 at 21:52
  • @Arandomperson — What the spec says and how browsers/screen readers/search engines deal with that data is not the same as what people writing bad HTML mean. – Quentin Mar 31 '20 at 21:53
  • @Quentin Well I wouldn't consider it bad HTML as lots of experienced HTML-ers have already used it and found ways to make it accessible, such as `Screen reader only text` –  Apr 01 '20 at 09:29
  • 2
    @Arandomperson — That's bloated and full of hacks. It's terrible. – Quentin Apr 01 '20 at 09:36
  • Any way to get fontawesome to change their ways? I don't like either. But I also don't like span and div as they are often used for page layout. Those can easily get polluted with global css. still seems better then – TamusJRoyce Aug 21 '20 at 04:13
  • Neither of the top answers address the fact that HTML is not a presentational language, but icons are presentational devices. It seems to me that the real answer to this debate is that the global attribute `class` should be the mechanism used to extend the semantic meaning of the ambiguously designed `` tag. `` is more semantically correct than ``. I'd argue that `` is inferior to `` because `` is defined as a range of text, while `` is defined as a generic container for 'phrasing content`. An icon is content, not text. – crush Dec 18 '20 at 14:49
  • 1
    someone above said "With the use of ligatures, using the i tag to display icons is semantic. In fact, Google suggests the use of the i tag with ligatures in it's Material icons guide.".. That is not true - MD section "Using the icons in HTML": `face` is suggested. –  Mar 27 '22 at 10:59
307

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 "i is for icon," I think it's actually the most semantic choice for an icon when a straightforward <img> 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 <i> could accommodate an icon pretty easily. After all, the reply-arrow symbol is saying "reply" in another way. It expresses a technical term that may be unfamiliar to the reader and would be typically italicized. ("Here at Twitter, this is what we call a reply arrow.") And it is a term from another language: a symbolic language.

If, instead of the arrow symbol, Twitter used <i>shout out</i> or <i>[Japanese character for reply]</i> (on an English page), that would be consistent with the spec. Then why not <i>[reply arrow]</i>? (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 "span of text" phrase (when the tag doesn't contain text also). It is clear that the <i> 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 "text" and "icon" 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 "Submit" 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 <a> 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 <a> tag, not a <span>, 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 ("something will happen when you click here"). Same deal with <i> - 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 <i> tag adds semantic meaning to an icon element.

The alternative option to carry an icon class by itself is <span>, which of course has no semantic meaning whatsoever. When a machine asks the <span> what it contains, it says, "I don't know. Could be anything." But the <i> tag says, "I contain a different way of saying something than the usual way, or maybe an unfamiliar term." That's not the same as "I contain an icon," but it's a lot closer to it than <span> 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 <i> 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 "there may be an icon here" 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 <i> 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 <span>s with <i>'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 "Web site" 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, "Whatever, that's stupid. I'm using 'website' because it's more concise and looks better." And before long, dictionaries officially acknowledged that spelling as correct.

4. So I'm going ahead and using it.

So, <i> provides more meaning to machines because of the spec, it provides more meaning to humans because we easily associate "i" with "icon", and it's only one letter long. Win! And if you make sure to include equivalent text either inside the <i> 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.

peterh
  • 11,875
  • 18
  • 85
  • 108
Holly
  • 3,601
  • 1
  • 17
  • 23
  • 40
    But there are ways to do this already without abusing ``: use any text element, including buttons or links, and add an icon using a background graphic and some padding, the same way it is done using ``. The HTML would look like `Reply`, which is semantic, the styled page shows an icon in addition. If the icon is the *only, primary* element, it should be an `Reply`. – deceze Jan 28 '13 at 06:16
  • 43
    @Holly, You took it to completely different side but sorry, I disagree with every single line you said. – Jashwant Jan 28 '13 at 06:22
  • 5
    @deceze Certainly `` is the most semantic option. But loading icons via CSS backgrounds is the better option for performance. My point is that no matter how it is loaded, an icon is an icon. It conveys a concept "in an alternate voice", unlike other CSS classes which are for decoration. Ideally there would be something like `` for this situation. But for now, yes, you can add the class to any element as though it was a standard style, but I think it's worth considering that `` conveys more semantic meaning. – Holly Jan 29 '13 at 05:31
  • 14
    Emptiness (even an icon) is *not* text, though, and text is what’s specifically written in the spec. – Ry- Mar 11 '13 at 01:47
  • @deceze I fully agree. css background with left-padding FTW IMO. – steve Mar 19 '13 at 22:23
  • 19
    Specifically written in the spec means jack. You know it and everyone else knows it. It's a guide. Nothing more. Do you think IE cares about the spec? They're getting better. Do you think every single browser is out there trying to get the spec perfect? Do you think everyone on the planet is using nav, header, footer, section, aside, ...n correctly? Nope. I go to page after page where aside is a replacement for
    And you know what? The way people continue to use is what's going to define "semantic" in the future.
     – o_O Jun 05 '13 at 15:38
  • 3
    @minitech I'm resurrecting an old comment here but icon fonts, which are becoming ever more common, _are_ text and they can convey meaning by themselves so it could be argued that in an `` element is appropriate. – harryg Nov 13 '13 at 10:52
  • 1
    @harryg: Only when there’s an actual icon inside the `` element. (Which is the *right* way to do it, but Bootstrap has never really been right. At all. [Did it change recently?]) – Ry- Nov 13 '13 at 17:07
  • I see what you mean. Yes Bootstrap 3.x changed to use an icon font over the sprite in 2.x, however it uses the `::after` psuedo-element to add the character which I guess doesn't count as meaningful content. – harryg Nov 14 '13 at 09:21
  • 1
    Isn't there a way shorter answer like: How good is the screenreader software from a blind person able to interpret it in a proper way? – sigi Jan 28 '14 at 15:07
  • 20
    Great arguments, I think you convinced me. Especially convincing is #3, "common usage makes right". Just as with common language, if everyone starts using a word in such a way, that becomes the standard usage. The HTML spec has been an evolving document for a while now, and adhering to it dogmatically is just silly. Adhering to common convention is a more sustainable path, in my opinion. Plus, the element is all but deprecated at this point, so I feel good about giving it a new, semantically rich life! I am curious how the spec will evolve with this usage, as I think it undoubtedly will. – Logic Artist Feb 12 '14 at 22:00
  • Great answer; you've encouraged me. When you have a set of 32p icons in a sprite, loading them in via CSS `background-image` is much easier than individual `` tags for each and every declaration. On a site such as mine, there can be up to 30 icons on a single page, plus some have hover states - a sprite is logical here, to reduce the HTTP requests. That may not matter too much with desktop browsers/home broadband, but it certainly does with mobile devices, and that's where the majority of the traffic seems to be coming from in modern times. It's time to adapt for mobile. – DylRicho Feb 21 '14 at 09:01
  • 7
    I don't agree with you. That said, +1 because your answer was interesting and important for this question. – fotanus May 29 '14 at 18:18
  • 3
    I agree with your reasoning but want to point out that you're wrong about the semantic for `` tags. The "something happens" semantic is for ` – George Mauer Mar 14 '15 at 17:03
  • 5
    The thing is that `` has a well-known meaning, and it's not "icon". Plus, should someone decide to do ` Text here?
    ` later, the text is in italics and someone has to go back and make it spans anyway.     – Charlie Martin Apr 16 '15 at 16:49
  • 1
    i think you could use your arguments, to suggest any tag can be used for an icon – c_breeez Jul 27 '15 at 15:22
  • 5
    I disagree with #3 for anything-- common usage doesn't make it right. Just like all those terms on Urban Dictionary that I'll likely never use. ('Bae' comes to mind...) Also your argument is that you'll have to replace `span` with `i` tags if it becomes standard... right now it isn't a standard. @DylRicho says `i` is all but deprecated, but if it does become deprecated you now have to replace all your `i` tags with `span` tags, or something different. My main issue with it is that people call it the `icon tag`. It is not an icon tag. – ps2goat Feb 24 '16 at 21:13
  • @ps2goat Agreed 100%. – DylRicho Apr 05 '16 at 17:34
  • 1
    I'm also not sure I agree but +1 because the argument is well-reasoned and civil. One of the founding principles of HTML5 is "pave the cowpaths" https://dev.w3.org/cvsweb/~checkout~/html5/html-design-principles/Overview.html?rev=HEAD#pave-the-cowpaths – jrz Apr 07 '16 at 18:03
  • What is actually going between the `` and `` tags? If it is a URL of an icon, like: `http://example.com/icon.png`, then how is the image of the icon going to be shown? – Kevin Fegan Apr 18 '17 at 07:18
  • 3
    R.e. point three, that mentality is pretty much what led us to have incompatible CSS and HTML across browsers that only now we're beginning to rectify. People decided they were going to be awkward and non-standard and "hey, everyone else will catch up," only for them to be out on a limb, other software to have to deal with the mess they'd made, and then one helluva time trying to tidy up at the end. Do it right, like the standard says; there's no reason to do otherwise. – Dan Apr 27 '17 at 15:28
  • Spec: "Use this element only when there is not a more appropriate semantic element." There can be no more semantic an approach than not including presentation in the markup in the first place. CSS can apply icons without any of this silliness. It's even actually _easier_: https://gist.github.com/amcgregor/53898a4dcf36082f007d2950deb1f8a3 – amcgregor May 02 '17 at 14:42
  • see [github - Issue 9464 - span vs i for icons](https://github.com/freeCodeCamp/freeCodeCamp/issues/9464) use ``, `` isn't recomended – PIZZZZZZZZZZZA is here Jan 19 '19 at 22:04
  • Good points. I can conclude that using either can be acceptable. Sometimes `` can be appropriate for the icon, other times not. Depending on the meaning and the context. If a specific case semantics would allow it, why not. – Hrvoje Golcic Feb 25 '20 at 08:11
  • `` is more semantically specific than `` which should make it less acceptable to use for something like an icon. Neither of the top answers address the fact that HTML is not a presentational language, but a markup language. Icons, however, are inherently presentational devices. We are given a device by which to extend the semantic meaning of elements GLOBALLY in HTML5. [`... web developers are encouraged to use names that describe the semantic purpose of the element.`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) – crush Dec 18 '20 at 14:42
  • Why then is it that no one ever seemed to argue when they had to use the element with fontawesome icons, or Google's material icons, for years? I say the element is definitely appropriate to use. – Maria Campbell May 17 '21 at 10:56
78

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,

<span class="icon-fb" role="img" aria-label="facebook"></span>

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.

dimo414
  • 47,227
  • 18
  • 148
  • 244
Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • 8
    @GeorgeMauer, all self-respecting html/web designers care about alt tags. the spec is there for a reason. like ramps in buildings, alt, title and aria tags exist for a reason. – osiris Jul 30 '15 at 14:47
  • 3
    @osiris now hold on, the specs get changed all the time. I agree its good to follow but you must take the underlying intent into account. That being said, since looking it up, I agree with you as its not just for screenreaders/missing images/tooltips - there is actually a semantic there I was unaware of. MDN: "Omitting this attribute indicates that the image is a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is not a key part of the content; non-visual browsers may omit it from rendering." – George Mauer Jul 30 '15 at 17:37
  • 4
    As a side note, I believe the correct aria role for an icon is [presentation](https://www.w3.org/TR/wai-aria/complete#presentation). Not [img](https://www.w3.org/TR/wai-aria/complete#img). – Sylvain Leroux Jan 29 '16 at 16:14
  • 3
    @SylvainLeroux, I think if icon is used in a button along with text, then role is presentation. But if only icon is used in button ( no text ), then its role is img. – Jashwant Aug 01 '17 at 16:46
  • @HrvojeGolcic, Yes, it cannot replace the `` as `span` has no semantic meaning. But by going through the link you provided, I think it's a good option to use `aria-label`. Can you provide a better approach ? – Jashwant Feb 24 '20 at 16:52
  • @Jashwant the point is: It's not accessible. Adding a `role` gives a semantic meaning - AT will consider it `` even on `` - so what's the point? ARIA should not be used if not necessary. Try testing with various screen readers. Quoting the article: "...adding labels using ARIA is a case of treating disabled users differently to other users, which is never a good thing". There `aria-label` is often useful but here is not the case! Simply the solution is visually hidden text e.g. `` – Hrvoje Golcic Feb 25 '20 at 08:01
  • 1
    @Jashwant I afraid you got it wrong concluding that `aria-label` is correct in this case from reading [bad practices](https://www.accessibility-developer-guide.com/knowledge/aria/bad-practices/). Please see the "Conclusion" section and also [a linked article](https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/label-labelledby/) - quote: "If you aim at providing a user experience that is the same for all audiences, you will probably never need aria-label and aria-labelledby. And due to the described peculiarities and side effects, we do not recommend to use them anyway" – Hrvoje Golcic Feb 25 '20 at 08:07
  • @HrvojeGolcic what are the side effects of aria-label in this case? – Alex78191 Sep 14 '22 at 09:04
  • 1
    @Alex78191 from my recent testing and reading https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role using `aria-label` in combination with `role="img"` here is fine. The `role` changes the semanting of SPAN to IMG, and `aria-label` is used instead of `alt` attribute. But then you could have as well just use IMG tag in the first place. While the case is valid I would still not recommend it, if you want non screen reader users to see this text contained in aria-label (maybe provide a tooltip for them, and think about smartphone users too... etc.) – Hrvoje Golcic Sep 15 '22 at 10:14
  • @HrvojeGolcic, but you cannot use empty image tags. It will send a server request. – Jashwant Sep 15 '22 at 11:22
  • @Jashwant Yes, true you cannot use IMG with empty SRC, it will also not pass HTML validation – Hrvoje Golcic Sep 15 '22 at 11:29
13

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:

<icon class="plus">

or

<icon-add>

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.

Timothy Perez
  • 20,154
  • 8
  • 51
  • 39
  • 4
    And then you go to the W3C validator, and enter ` Hello ` and you get a single error, saying `Error: Element icon not allowed as child of element body in this context.` – Digital Ninja Dec 01 '18 at 01:18
  • If you use custom tag with `-` , then validator.w3.org is not showing any error and youtube seems using as their icon tag. ` Hello `. but still, react doesn't change classname to class when I use this `c3-icon`. – hangu Oct 01 '21 at 14:17
12

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 <i> tag, and all browsers support that tag.

They could've certainly used a <span>, 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 <i> 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 <i> tag, is completely coincidental.

Ricardo Zea
  • 10,053
  • 13
  • 76
  • 79
  • 4
    Not really, If you look at there code inside the I is a before element –  Jul 04 '16 at 12:40
5

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 <i> 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 <i> tags to <span style="font-style:italic"> instead and then wondered why the entire template looked strange.

This is the main reason it is a bad idea to use the <i> 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

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

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 <i> - and also it passes W3C standard.

Rup
  • 33,765
  • 9
  • 83
  • 112
TheKLF99
  • 255
  • 2
  • 4
2

I also found this to be useful when i wanted to place an icon with absolute positioning inside a link <a> tag.

I thought about the <img> 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 <img> 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 <span> or <i> - in which case <i> 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.

Emery King
  • 3,550
  • 23
  • 34
  • Ok Here's why I think it is bad practice. Historically was for Bold and was for itallic. So if you used you create an empty itallic tag which is not what it is for. These were replaced with and So for the purpose of I guess ancient browsers you would not want to be marking up a page with empty itallic tags, and what about screen readers for blind, should not those icons inside the link be say TEXT. So is a better choice as you can make the font-size zero and have the icon as well. – user1712691 Sep 30 '16 at 19:44
  • 1
    @user1712691 It's a common myth that `` and `` were replaced with `` and `` respectively. But the truth is, `` and `` are not deprecated, and have taken on new semantic meanings. Read [the official specs](https://www.w3.org/TR/html52/textlevel-semantics.html#the-i-element) to learn more. – chharvey Nov 04 '18 at 20:44