html - HTML5 i tag validity with icons

Question

I have been using Bootstrap to build my site, but in doing so and researching SEO, I've discovered that using the i tags with glyphicons is not technically "valid" HTML. Is there a definitive rule that says that i tags can be used in this way without effecting markup validity without effecting SEO?

As part of this issue, I am also trying to satisfy a complaint that my anchor text does not describe its destination:

<a href="@Url.Action("Accountant", "Service")">
     <div class="service-icon">
           <div class="icon-book-1 icon-medium-effect icon-effect-2"></div>
     </div>
</a>

This produces the desired visual effect, however I can't add anchor text else it will obviously be displayed on the screen. Normally an image would have been used within the anchor and I could have displayed alt text, so I'm stuck as to where best to put this "descriptive text".

Answer 1

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.