0

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".

unor
  • 92,415
  • 26
  • 211
  • 360
envio
  • 7
  • 1
  • 3
  • Are you using Bootstrap 3? You don't need to use `i` tags anymore, `` work as well. – Brandon Mar 17 '14 at 21:51
  • Yes just noticed it's Bootstrap 3, but if I change it to the alignments of the icons change, which I wouldn't expect to happen. Thanks for pointing this option out though! – envio Mar 17 '14 at 21:58
  • This question appears to be off-topic because it is about SEO – John Conde Mar 18 '14 at 11:53

2 Answers2

5

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.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
2

You can use something like <span class="sr-only">Your Text</span> to improve the accessibility.

.sr-only is a built-in Bootstrap class to make it easier to provide useful text to screen readers when you also do not want that text to appear visually on the screen.

Martin Serrano
  • 3,727
  • 1
  • 35
  • 48
mpeace
  • 81
  • 1
  • 6