Question

我一直在使用Bootstrap来构建我的网站，但是在这样做并研究搜索引擎优化时，我发现使用带有字形的i标签在技术上并不是有效的＆＃34; 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文字，因此我最不愿意放置这个＆＃34;描述性文字＆＃34;。

Answer 1

请勿使用i。

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

[...]以一种交替的声音或情绪，或以其他方式偏离正常散文的文本范围，以指示不同质量的文本，例如分类标识，技术术语，来自另一种语言的惯用短语西方文本中的，音译，思想或船名。

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

术语＆＃34; icon＆＃34;以 i 开头。
元素名称很短。

使用span代替，这是无意义的元素。

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

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

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

Answer 2

您可以使用<span class="sr-only">Your Text</span>之类的内容来改善辅助功能。

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

HTML5我用图标标记有效性

2 个答案: