[Resolved] Question about the use of the i element to display icons

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.

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.

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.