Why does font-awesome recommend using <i> elements instead of <span> elements? Is one preferable for a concrete reason?
If you review the examples for font-awesome, you will see that they consistently use the i element. I would have thought that the span element would be a more appropriate choice, since the i element was intended to modify a "span of text.", but what I want to do is place a glyph on the page, not modify existing text.
You could make the case that the span element was also intended to modify a span of text (hence the name), but the W3C definition leaves it wide open--simply stating that span "can be useful when used together with other attributes."
However, my question is not focused on the semantics of the two tags, but on the user experience implications of one tag over the other. In my testing, the span works just as well as i. Are there any concrete reasons why one is preferable over the other? Examples of concrete reasons include:
- One element being handled reasonably by accessibility software (e.g., screen readers), and the other not.
- User agent support (e.g., one element behaves consistently across user agents, the other doesn't).
Answer
I've never experienced a difference in user experience between the i element or a span with a css style that makes the text italics. The reason why you might want to prefer the span element is just semantic (separation of content and style).