Why the <i>?
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
The
ielement 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.
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!
Further Reading
Sign up to get new posts delivered directly to your inbox!