我一直在使用 Bootstrap 来构建我的网站，但是在这样做和研究 SEO 的过程中，我发现使用带有字形的 i 标签在技术上不是“有效的”HTML。是否有明确的规则表明可以以这种方式使用 i 标签而不影响标记有效性而不影响 SEO？
作为这个问题的一部分，我还试图满足关于我的 anchor 文本没有描述其目的地的投诉:
<a href="@Url.Action("Accountant", "Service")">
<div class="service-icon">
<div class="icon-book-1 icon-medium-effect icon-effect-2"></div>
</div>
</a>
这会产生所需的视觉效果，但我无法添加 anchor 文本，否则它显然会显示在屏幕上。通常情况下， anchor 内会使用图像，并且我可以显示 alt 文本，所以我不知道将这个“描述性文本”放在哪里最好。
最佳答案
不要使用i。
i element具有不适合一般图标的含义:
[…] 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.
有些人使用 (d) i 作为显示图标(通过 CSS)的钩子(Hook)的原因可能是:
- 术语“图标”以 i 开头。
- 元素名称很短。
改用 span，这是一个无意义元素。
如果图标是相关内容(对于理解/使用您的页面很重要)，请考虑改用 img 元素，它允许您使用 alt 属性。
您应该仅将 CSS 用于装饰性图标。如果那不可能:
如果你链接这个图标并且链接不包含任何内容(没有文本，没有img，...)，即它只包含一个空元素，那么您应该在 HTML 中提供一些内容。否则，不支持 CSS 的访问者、屏幕阅读器用户等将无法使用您的链接。如果您出于设计原因不想包含内容，请将其隐藏起来。 More details in my related answer .
关于HTML5 i 带图标的标签有效性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22466223/