Yesterday, I wrote about the difference between the <em> and <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
.
A <span> element, on the other hand, is a generic inline container for phrasing content, which does not inherently represent anything
.
A <span> element, then, is the more semantic choice in this context. 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?