Should I use <i> tag for icons instead of <span>?
Use <span> for icons, not <i>. The <i> tag is meant for italics, not icons. To incorporate icons, like FontAwesome, use <span> with the attribute aria-hidden="true", which ensures your content remains accessible.
For instance:
Even though <i> can be used for icons, it's more semantically accurate and accessible to use <span>.
It's Semantics, not Semantix!
In HTML5, semantics greatly impact how both the end users and user agents (like search engines and screen readers) interpret the content. The <i> tag, by convention, represents italicized text. However, with current accessibility standards in mind, a <span> tag along with ARIA attributes is much more suitable:
Accessibility First!
No matter what the design is, accessibility should be your first concern. Screen readers depend on properly marked up content to interpret data for users with visual impairments. A <span> tag combined with ARIA roles and labels makes certain that icons are interpreted correctly, unlike <i> tags which often imply pure stylistic changes and fail to communicate the icon's role.
Evolution, not Revolution
Design trends evolve and the move towards more semantic and accessible web design is reflected in the adoption of <span> for icons in Bootstrap 3. This shift demonstrates best practices emphasizing accessibility and semantic usage of HTML over aesthetic considerations.
Performance is Key
Semantics and accessibility aside, performance is a boon. Overusing <i> element or introducing intensive markup only for icons can significantly affect your webpage's performance. Consider deploying custom elements or pseudo-elements (:before and :after) to create clean, manageable code that doesn't overload with HTTP requests.
The Future is Custom Elements
Look forward and you'll see custom elements or components using frameworks like Angular Directives and Polymer. These ensure understanding, modern design, and support for legacy browsers using tools like shims.
The Browser's Tale
To ensure consistency across all browsers - be it Chrome, Firefox, or Safari, it's advisable to normalize custom elements. Although <i> came from the necessity to support older browsers, it no longer should steer current practices.
Maintain Structure — Clean HTML
It's equally important to maintain a clean HTML structure. Avoid adding unnecessary markup solely for styling's sake. This enhances performance whilst also keeping your code clean and highly readable.
Was this article helpful?