我应该使用<i>标签代替<span>吗？

Question

我查看了Facebook的来源,他们使用<i>标签来显示图标.

此外,今天我查看了Twitter的Bootstrap.它还使用<i>标签来显示图标.

但,

来自HTML5规范:

I元素表示一个替代语音或心情的文本范围,或以其他方式偏离正常散文,例如分类标识,技术术语,来自另一种语言的惯用短语,思想,船名或其他散文的典型排版呈现斜体.

他们为什么使用<i>标签来显示图标？

这不是一个坏习惯吗？

或者我在这里遗漏了什么？

我正在使用span显示图标,它似乎对我有用,直到现在.

更新:

Bootstrap 3现在span用于图标.官方文件

Answer 1

他们为什么使用<i>标签来显示图标？

因为它是:

• 短
• 我代表图标(虽然不是HTML)

这不是一个坏习惯吗？

可怕的做法.它是性能胜过语义的胜利.

Answer 2

我在这里跳得太晚了,但是在自己思考的时候遇到了这个页面.当然我不知道Facebook或Twitter如何证明它是合理的,但这是我自己的思想过程,它的价值.

最后,我得出结论,这种做法不是那么无意义(就是一个词？).事实上,除了简短和"我是图标"的良好关联之外,我认为当一个简单的<img>标签不实用时,它实际上是图标的最大语义选择.

1.用法与规格一致.

虽然它可能不是W3主要考虑的内容,但在我看来,官方规范<i>可以很容易地容纳一个图标.毕竟,回复箭头符号以另一种方式说"回复".它表达了读者可能不熟悉的技术术语,通常用斜体表示.("在Twitter上,这就是我们所说的回复箭头.")这是一个来自另一种语言的术语:一种符号语言.

如果使用Twitter <i>shout out</i>或<i>[Japanese character for reply]</i>(在英文页面上),而不是箭头符号,那将与规范一致.那为什么不<i>[reply arrow]</i>呢？(我在这里严格谈论HTML语义,而不是可访问性,我将会这样做.)

据我所知,图标用法明确违反规范的唯一部分是"文本范围"短语(当标签也不包含文本时).很明显,<i>标签主要用于文本,但与标签的整体意图相比,这是一个非常小的细节.此标记的重要问题不是它包含的内容格式,而是该内容的含义.

当您认为"text"和"icon"之间的界限在网站上几乎不存在时尤其如此.文本可能看起来更像一个图标(如在日本示例中)或图标可能看起来像文本(如在jpg按钮中显示"提交"或带有重叠标题的猫照片)或文本可能被替换或增强为通过CSS的图像.文字,图片 - 谁在乎？这都是内容.只要每个人 - 有障碍的人,有缺陷的浏览器,搜索引擎蜘蛛和其他各种机器都能理解这种意义,我们就完成了我们的工作.

因此,规范的编写者没有考虑(或选择)澄清这一点的事实不应该使我们的手与做有意义的事情联系起来并且与标签的精神一致.该<a>标签最初旨在将用户带到其他地方,但现在它可能会弹出一个灯箱.大呐喊吧？如果有人在规格赶上之前想出如何在点击时弹出一个灯箱,他们仍然应该使用<a>标签,而不是a <span>,即使它与当前定义不完全一致 - 因为它是最接近的并且是仍然符合标签的精神("当你点击这里时会发生一些事情").同样的处理<i>- 无论你把它放在里面的任何类型的东西,或者你创造性地使用它,它都表达了一个替代或分开的术语的一般概念.

2. <i>标签为图标元素添加语义含义.

单独携带图标类的替代选项是<span>,当然没有任何语义含义.当机器询问<span>它包含的内容时,它说:"我不知道.可能是什么." 但是这个<i>标签说:"我用一种不同于通常方式说话的方式,或者可能是一个不熟悉的术语." 这与"我包含一个图标"不一样,但它比它更接近它<span>!

最终,常见用法是正确的.

除了上述内容之外,值得考虑的是机器阅读器(无论是搜索引擎,屏幕阅读器还是其他)都可以随时开始考虑Facebook,Twitter和其他网站使用<i>标签作为图标.他们不关心规范,因为他们关心通过任何必要的方式从代码中提取含义.因此,他们可能会使用这种常用的知识来简单地记录"这里可能有一个图标"或做一些更高级的事情,比如触发查看CSS以获得暗示意义,或者谁知道什么.因此,如果您选择<i>在网站上使用for图标,那么您可能会提供比规范更多的含义.

此外,如果这种用法变得普遍,将来可能会包含在规范中.然后你将完成你的代码,用<span>s 替换<i>s!因此,加入规范的方向可能是有意义的,特别是当它与当前规范没有明显冲突时.常见的用法倾向于比其他方式更多地规定语言规则.如果你已经够大了,你还记得"网站"是这个词新的时候的官方拼写吗？字典坚持必须有空间,Web必须大写.这有语义上的原因.但常见的用法是,"无论如何,这是愚蠢的.我正在使用'网站',因为它更简洁,看起来更好." 不久,词典正式承认拼写正确.

所以我要继续使用它.

因此,<i>由于规范,它为机器提供了更多的意义,它为人类提供了更多的意义,因为我们很容易将"i"与"icon"相关联,并且它只有一个字母长.赢得!如果你确保在<i>标签内或旁边包含等效文本(就像Twitter那样),那么屏幕阅读器就会明白在哪里点击回复,如果没有加载CSS,链接就可以使用了视力和体面的浏览器看到一个漂亮的图标.考虑到这一切,我没有看到缺点.

Answer 3

Quentin的回答明确指出i标签不应该用于定义图标.

但是,霍莉认为这span本身没有任何意义,并投票赞成i而不是span标签.

很少有人建议使用img它的语义并包含alt标签.但是,我们不应该使用img因为即使空src发送请求到服务器.在这里阅读

我想,正确的方法是,

<span class="icon-fb" role="img" aria-label="facebook"></span>

这解决了没有alt标签的问题,span并使视力受损的用户可以访问.这是语义而不是滥用(黑客)任何标签.

Answer 4

我的猜测:因为Twitter认为需要支持旧浏览器,否则他们会使用:before/ :afterpseudo-elements.

旧版浏览器不支持我提到的那些伪元素,因此他们需要为图标使用实际的HTML元素,并且由于图标没有"独占"标记,因此他们只使用了<i>标记,并且所有浏览器都支持那个标签.

他们当然可以使用a <span>,就像你一样(完全没问题),但可能由于我上面提到的原因加上Quentin提到的原因,也是Bootstrap使用<i>标签的原因.

当你使用额外的标记来造型时,这就是一个不好的做法,这就是伪元素被发明的原因,将内容与风格分开......但是当你看到需要支持旧版浏览器时,有时你会被迫做这些的东西.

PS.图标以"i"开头并且有<i>标签的事实完全是巧合.

Answer 5

我完全采用了与其他人的答案截然不同的方法.让我为我的解决方案添加前缀,并指出有时标准和约定应该被打破,特别是在标准HTML词法标签定义的上下文中.

没有什么可以阻止你创建自我描述的自定义元素.

现代浏览器甚至IE 6+(w/shim)都可以支持以下内容:

<icon class="plus">

要么

<icon-add>

只需确保标记标准化:

 icon { display:block; margin:0; padding:0; border:0; ... }

如果你需要支持IE9或更早版本,请使用垫片(参见下面的帖子).

看看这个StackOverflow帖子:

有没有办法在HTML5中创建自己的HTML标签

为了进一步论证,Google的Angular Directives和新的Polymer项目都使用了自定义HTML标签的概念.

Answer 6

我认为这看起来很糟糕 - 因为我最近正在使用Joomla模板而且我一直在使模板失败W3C,因为它使用了<i>标签并且已经弃用了,因为它的原始用途是斜体化,现在通过CSS完成不再是HTML了.

这确实是非常糟糕的做法,因为当我看到它时,我通过模板并将所有<i>标签<span style="font-style:italic">改为,然后想知道为什么整个模板看起来很奇怪.

这是以<i>这种方式使用标签是一个坏主意的主要原因- 你永远不知道后来谁会看你的工作并且"假设"你真正想要做的是将文本斜体化而不是显示图标.我刚刚在网站上放了一些图标,我用下面的代码做了

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

这样我就把所有的图标放在一个类中,所以我所做的任何更改都会影响所有的图标(比方说我想要它们更大或更小,或者是圆形边框等),alt文本让屏幕阅读器有机会告诉人们什么这个图标可能不仅仅是"斜体文字,斜体结尾"(我不知道屏幕阅读器如何阅读屏幕,但我猜它就是这样),标题也让用户有机会鼠标悬停图像并得到一个工具提示,告诉他们图标是什么,以防他们无法弄明白.比使用好多了<i>- 而且它也通过了W3C标准.