Question about the use of the i element to display icons

  • Resolved George Notaras

    (@gnotaras)


    11 years, 4 months ago

    Hello Anthony,

    I noticed that there is extensive use of the <i> element throughout the templates in order to display the icons. This results in having several <i class="..."></i> blocks without any text.

    Since the <i> element is supposed to be used with text, an author might have used it inside the post body in order to give emphasis to some words.

    In that case, I try to imagine how a search engine would value the existence of multiple <i> elements throughout the page, some of them enclosing text and some others not enclosing any text.

    My thought is that the search engine could be confused by this. The empty <i> tags could mean that the author is using the <i> element for something different than emphasizing text (which actually happens now) and thus automatically undervalue any text enclosed in <i> elements as well.

    I was wondering if it would be better to use another element for the icons, for instance <span>. I tested it and it seems to work well and validates without any issues.

    I’m not an expert in this field and I hope I am not exaggerating here. But I’d really like to hear your thoughts about this.

    Thanks in advance,
    George

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter George Notaras

    (@gnotaras)

    Hi,

    I sent a pull request here, in case anyone would like to test using span instead of the i element.

    George

    Theme Author Anthony Hortin

    (@ahortin)

    The <i> (and <b>) were html4 font style elements. Their style can now be changed via CSS, meaning they’re not only presentational — <b>, for example, doesn’t have to be bold. Because of this, it’s recommended to use classes to indicate meaning to make it easy to change the style later. It’s now more appropropriate to use <em> for italics and <strong> for bold.

    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, a thought, or a ship name in Western texts.
    HTML — Living Standard

    Using the <i> element is also the recommended way of using the Font Awesome icons.

    You can read this article for more info on <i>, <b>, <em> and <strong> – https://html5doctor.com/i-b-em-strong-element/

    You can also find out more about Font Awesome here – https://fortawesome.github.io/Font-Awesome/

    Thread Starter George Notaras

    (@gnotaras)

    Hi Anthony.

    Thank you for your detailed reply. Seems like I’m still stuck with HTML 4 logic. I’ll check these documents out.

    George

    Thread Starter George Notaras

    (@gnotaras)

    Hello Antony,

    I’ve done some research regarding the use of the <i> and <b> elements in HTML4 and HTML5 documents.

    In HTML5 their meaning is more semantic than presentational. Search engines should expect that these elements enclose text.

    Of course you did nothing wrong by following the examples provided by the Font-Awesome project.

    On the other hand, my research tells me that there is absolutely no reason valid enough to justify the use of those elements in order to display icons.

    My 2 cents,
    George

    Thread Starter George Notaras

    (@gnotaras)

    Hello Anthony,

    I had opened an issue on the Font-Awesome project about the use of the i element in the examples and they seem to be considering to switch to the more semantically correct span element. Perhaps you would be interested in following the discussion.

    FYI, I’ve used Quark with the patch I had sent you in the pull request and had no problems so far.

    Kind Regards,
    George Notaras

    Theme Author Anthony Hortin

    (@ahortin)

    Thanks George, I’ll check it out ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Question about the use of the i element to display icons’ is closed to new replies.