Yesterday, I wrote about the difference between the
<i> elements in HTML. Today, I want to preach about big companies ignoring the importance of this semantic difference. 😡
Font Awesome and Google Fonts promote the use of the
<i> element for their icon fonts. This pisses me off because they should be using the
<span> element instead.
As we learned yesterday, an
<i> element represents
a range of text that is set off from the normal text for some reason.
<span> element, on the other hand, is a
generic inline container for phrasing content, which does not inherently represent anything.
<span> element, then, is the more semantic choice in the context of an icon font. We don’t want to set the icon off from the rest of the text; we just need a generic container for it.
A quote from the Font Awesome documentation:
We like the
<i>tag for brevity and because most folks use
<em></em>for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a
<span>is more semantically correct.
You’re damn fucking right that a
<span> is more semantic! Stop encouraging people to do the wrong thing!
I hate that big companies and projects, with all their influence, choose to encourage laziness for the sake of developer convenience. My good friend Chris Ferdinandi shared a post about this last week.
Semantic HTML is important. From one professional to another: please respect your craft and do the right thing. It matters. And in this case, it’s only three extra characters! Are you that fucking lazy?