HTML5 i tag validity with icons

by

Don’t use i.

The i element has a meaning which isn’t appropriate for general icons:

[…] 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.

Reasons why some people use(d) i as hook for showing icons (via CSS) might be:

  • The term “icon” starts with i.
  • The element name is short.

Use span instead, which is a meaningless element.

If the icon is relevant content (important for understanding/using your page), consider using the img element instead, which allows you to use the alt attribute.

You should use CSS for decorative icons only. If that’s not possible:

If you link this icon and the link doesn’t contain any content (no text, no img, …), i.e. it only contains an empty element, then you should provide some content in the HTML. Otherwise, visitors without CSS support, screen reader users, etc. won’t be able to use your link. If you don’t want to include content for design reasons, hide it visually. More details in my related answer.

More Related Contents:

  1. How do search engines deal with AngularJS applications?
  2. Put icon inside input element in a form
  3. How to add a browser tab icon (favicon) for a website?
  4. What is the purpose of the “role” attribute in HTML?
  5. What characters can be used for up/down triangle (arrow without stem) for display in HTML?
  6. How do I add a “search” button in a text input field?
  7. What happens if the meta tags are present in the document body?
  8. Google bot crawling on AngularJS site with HTML5 Mode routes
  9. Is it possible to use the same meta tag for opengraph and schema.org
  10. Can I Use Multiple ItemProps in a Span Tag for schema.org Rich Snippets?
  11. What is the correct use of schema.org SiteNavigationElement?
  12. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?
  13. Can I change the color of Font Awesome’s cog icon?
  14. Best JSON-LD practices: using multiple elements?
  15. How to properly use h1 in HTML5
  16. Which HTML elements can receive focus?
  17. How to remove the arrow from a select element in Firefox
  18. How to save CSS changes of Styles panel of Chrome Developer Tools?
  19. Alternative to iFrames with HTML5
  20. How to disable Google translate from HTML in Chrome
  21. HTML5 drag and drop file upload to Java Servlet
  22. Audio capturing with HTML5 [closed]
  23. How to show multiline text in a table cell
  24. Center Navbar links without brand pushing it to the right in Bootstrap 4?
  25. Line height issue with inline-block elements
  26. Avoiding repeated constants in CSS
  27. Title with bottom border smaller than width
  28. How to preserve whitespace indentation of text enclosed in HTML tags excluding the current indentation level of the tag in the document?
  29. Tooltip on image
  30. HTML5 FileReader alternative

Leave a Comment