Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


[i] vs. [span] for icons.
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

[i] vs. [span] for icons.

nepsneps Member
edited April 2016 in General

I see people everywhere using the <i> tag for icons, as in:

<i class="fa '.$icon.'"></i>

I personally think this is really sloppy and a horrifying example of "who cares what's underneath, as long as it works?" Personally, I always use <span>, which feels much more appropriate.

Anyway, what does LET use?

Comments

  • Four20Four20 Member
    edited April 2016

    mostly 'i', cuz as u said, who cares.

  • FranciscoFrancisco Top Host, Host Rep, Veteran

    i for icon

    Francisco

    Thanked by 1GCat
  • NekkiNekki Veteran

    I'd use span but a lot of my background is in making websites accessible for those with impairments (particularly visual impairments), so I'm used to making sure my HTML used correctly.

  • @Four20 said:
    mostly 'i', cuz as u said, who cares.

    Tl;dr: neither, you should use the img element.

    We should care about a more semantic web, make sure that people with impairments are able to use our sites (accessibility), and build documents that are standard compliant and future proof. The W3C standard for the i element says:

    The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

    So, the i element wasn't meant to be used to show icons: it's a element on the text level semantics for HTML. The same can be said about the span element, it's a text level element and should not be used to show anything that isn't text. The standard for this element says:

    The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

    So, the span element was meant to be used as a children element for other texts elements when you need different attributes on specific parts of the content of a parent element.

    On the other hand, the HTML5 standard do preconize a way to show icons and it's using the img tag. The standard defines a icon as:

    [...] usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.

    And put some conditions to show icons:

    1. When an icon conveys additional information not available in text, provide a text alternative.

    2. Use an empty alt attribute when an icon is supplemental to text conveying the same meaning. Where images are used in this way, it would also be appropriate to add the image using CSS.

    Always remembering that:

    The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

    Please, refer to the standard to see examples of the above mentioned conditions, as LET posting with HTML is broken.

  • @EkaatyLinux but how about font-icons?

  • @drazilox said:
    EkaatyLinux but how about font-icons?

    There is no perfectly standardized semantic for it by now. But refer to this article to see a approach that uses most semantic HTML and provide a very good solution for screen readers.

  • I do agree that using SVG is a good approach, but I see some people using it without providing a way for a screen reader to be able to describe the idea behind the icon when it appears without a describing text element. Using a figure element and a hidden figcaption would make using SVG a perfectly semantic option to icons.

  • EkaatyLinux said: The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

    TIL.

    I always thought it meant italicize.

  • @EkaatyLinux said:

    Here I was ready to criticize you for being pedantic, but I recant because that CSS Tricks article is genuinely good. Thanks for sharing!

    Thanked by 1afterSt0rm
  • @Rallias said:
    I always thought it meant italicize.

    Browsers will print italicized text to semiotically indicates what the standard declares just because this is the historical way of building the required emphasis, but a browser can choose other ways to indicate this emphasis.

  • @JustAMacUser said:
    Here I was ready to criticize you for being pedantic, but I recant because that CSS Tricks article is genuinely good. Thanks for sharing!

    Can you share with me why you thought that I was being pedantic? I would appreciate it.

  • JustAMacUserJustAMacUser Member
    edited April 2016

    Mostly for just pushing the use of img for icons, meanwhile things like Bootstrap use i for their web fonts--so in reality anything will work for just about anything. But the article referenced had some good arguments for how to embed icons, including web fonts. So in the end I decided I agree with you.

  • afterSt0rmafterSt0rm Member
    edited April 2016

    @JustAMacUser said:
    Mostly for just pushing the use of img for icons, meanwhile things like Bootstrap use i for their web fonts--so in reality anything will work for just about anything. But the article referenced had some good arguments for how to embed icons, including web fonts. So in the end I decided I agree with you.

    Thank you for your feedback. I just want to make a comment on the use of i by Bootstrap.

    Bootstrap was preconizing the use of the i tag on their version 2, but after the version 3 launch they started to preconize the use of span for icons, as you can see on the official documentation.

    The reason for this is that using i or span to show font-icons will provide a perfomance gain because browsers will always make a request to the server when they see a img element even if the src attribute is empty, what doesn't makes sense if you are using font-icons.

    Well, at the end of the day, acessibility, linked data, etc; all depends on a semantic web. Write HTML pages that are standard compliant is better for all of us. It's not about being pedantic, it's about making a better www.

    Thanked by 2JustAMacUser Nekki
  • NekkiNekki Veteran

    Rallias said: I always thought it meant italicize.

    It did in earlier versions of HTML (before anyone really gave two shits about the semantic web). If I remember correctly, the tag was deprecated in favour of <em> in HTML 4, but that was reversed in HTML 5 and it was given a new meaning.

  • oneilonlineoneilonline Member, Host Rep

    I have always seen it as for icons. Only recently I've started seeing used. Does it make any difference? Perhaps with some browsers, new and old?

Sign In or Register to comment.