I recently had a brief twittersation with @thedutchcoder and @csswizardry in regards to using the icon module in mark-up. The discussion, at least at the point where I joined in, specifically revolved around the use of <span> versus the use of <i>. Being that I follow Jonathan Snook’s example of the icon module in SMACSS, naturally I use the <i>. However, I am not using it blindly. I read the HTML5 spec for the <i> and made my decision based on my interpretation of what was defined there.

HTML

Living Standard — Last Updated 19 January 2013

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.

—whatwg.org

The part that I am particularly interested in is an alternate voice or mood, or otherwise offset from the normal prose. If we look at how the information is displayed within the interface, we see the visual pattern of icon + text. The icon is the visual representation of the thing, where the text beside it is the textual or linguistic representation of the thing. However different, they are both representing the same thing, the same idea.

With that said, the alternate voice or mood start to come into focus (or at least in my mind). The icon, being the visual representation, is offset from the normal prose of the textual representation.

I may be over-analyzing this, but my intention here is to make peace with the use of the <i> element for icons. If you still prefer <span> over <i>, by all means use it. That’s what makes HTML so great—authors have the power to interpret the information differently. The point is that we think about what we are doing and how we are doing it.

At the end of the day, as the <i> is an empty element, the point of semantics just may be moot.

Cheers!

← Back to Notes