HTML5我用图标标记有效性 [英] HTML5 i tag validity with icons

问题描述

我一直在使用Bootstrap来建立自己的网站，但是通过这样做和研究搜索引擎优化，我发现使用带有图形符号的 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 文本，所以我坚持要把这个描述性文本放在最合适的位置。不要使用 i 。

解决方案

/ p>

i 元素的含义不适合一般的图标：

[...]以一种替代的语音或情绪表达一段文本，或以一种表示不同质量的文本的方式从正常散文中偏移，例如分类标记，技术术语，来自其他语言的习惯用语，音译，思想或船舶名称。

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

<李>的短期的图标以 i 开头。

• 元素名称短。

$ b

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





---





如果图标是相关内容（对理解/使用您的页面很重要），请考虑使用 img 元素，它允许你使用 alt 属性。



您只能将CSS用于装饰性图标。如果这是不可能的：





如果您链接此图标并且该链接不包含任何内容（无文本，则不存在 img ，...），即它只包含一个空元素，那么你应该在HTML中提供一些内容。否则，没有CSS支持的访问者，屏幕阅读器用户等将无法使用您的链接。如果您不想因设计原因包含内容，请将其隐藏起来。 我的相关答案中的更多详细信息。




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

解决方案

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.

这篇关于HTML5我用图标标记有效性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！