带有图标的 HTML5 i 标签有效性答案

【问题标题】：HTML5 i tag validity with icons带有图标的 HTML5 i 标签有效性
【发布时间】：2014-04-23 08:35:45
【问题描述】：

我一直在使用 Bootstrap 来构建我的网站，但在这样做和研究 SEO 的过程中，我发现使用带有字形图标的 i 标签在技术上并不是“有效”的 HTML。是否有明确的规则表明i 标签可以以这种方式使用而不影响标记有效性而不影响 SEO？

作为这个问题的一部分，我还试图解决我的锚文本没有描述其目的地的投诉：

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

这会产生所需的视觉效果，但是我不能添加锚文本，否则它显然会显示在屏幕上。通常情况下，锚点中会使用图像，而我可以显示 alt 文本，所以我不知道将这个“描述性文本”放在哪里最好。

【问题讨论】：

你在使用 Bootstrap 3 吗？您不再需要使用i 标签，<spans> 也可以使用。
是的，刚刚注意到它是 Bootstrap 3，但如果我将其更改为，图标的对齐方式会发生变化，这是我不希望发生的。感谢您指出此选项！
这个问题似乎是题外话，因为它是关于 SEO

标签： html seo icons glyphicons

【解决方案1】：

不要使用i。

i element 的含义不适用于一般图标：

[...] 一段以另一种声音或语气表达的文本，或以其他方式偏离正常散文以指示不同质量的文本，例如分类名称、技术术语、来自另一种语言的惯用短语、音译、思想或西方文本中的船名。

有些人使用（d）i 作为显示图标（通过 CSS）的钩子的原因可能是：

“图标”一词以 i 开头。
元素名称很短。

改用span，这是一个无意义的元素。

如果图标是相关内容（对于理解/使用您的页面很重要），请考虑改用 img 元素，这样您就可以使用 alt 属性。

您应该仅将 CSS 用于装饰图标。如果这是不可能的：

如果你链接这个图标并且链接不包含任何内容（没有文字，没有img，...），即它只包含一个empty元素，那么你应该提供一些内容在 HTML 中。否则，没有 CSS 支持的访问者、屏幕阅读器用户等将无法使用您的链接。如果您出于设计原因不想包含内容，请将其隐藏起来。 More details in my related answer.

【讨论】：

【解决方案2】：

您可以使用<span class="sr-only">Your Text</span> 之类的东西来提高可访问性。

.sr-only 是一个内置的 Bootstrap 类，当您不希望文本在屏幕上直观显示时，可以更轻松地向屏幕阅读器提供有用的文本。

【讨论】：