我应该使用<i>标签而不是<span>吗？[关闭]

我调查了Facebook的来源，他们使用<i>标签显示图标。

另外，今天我调查了Twitter的Bootstrap。它还使用<i>标签显示图标。

但，

根据HTML5规范：

I元素代表替代语音或语气中的文本范围，或以其他方式偏离正常散文，例如分类名称，技术术语，另一种语言的惯用语，思想，船名或其他散文，其典型的印刷形式以斜体显示。

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

这不是一个坏习惯吗？

还是我在这里想念什么？

我一直span在显示图标，到目前为止，它似乎一直对我有用。

更新：

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

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

因为它是：

• 短
• 我代表图标（尽管不是HTML）

这不是一个坏习惯吗？

糟糕的做法。这是性能胜过语义的胜利。

我跳到这里有点晚，但是我自己仔细考虑时却碰到了该页面。当然，我不知道Facebook或Twitter的合理性，但这是我自己对价值的思考过程。

最后，我得出的结论是，这种做法不是那么语义化（这是一个词吗？）。实际上，除了简短和“ i代表图标”的良好关联之外，我认为当简单<img>标签不实用时，它实际上是图标的最语义选择。

1.用法与规格一致。

虽然这可能不是W3的主要思想，但在我看来，它的官方规格<i>可以很容易地容纳图标。毕竟，回复箭头符号以另一种方式表示“回复”。它表示一个可能不熟悉读者的技术术语，并且通常会以斜体显示。（“在Twitter上，这就是我们所说的回复箭头。”）这是另一种语言的术语：一种象征性语言。

如果Twitter使用<i>shout out</i>或<i>[Japanese character for reply]</i>（在英文页面上）而不是箭头符号，则与规范一致。那为什么不<i>[reply arrow]</i>呢？（我在这里严格地讲的是HTML语义，而不是可访问性，我将继续学习。）

据我所知，图标用法明确违反的规范的唯一部分是“文本范围”短语（当标记也不含文本时）。显然，<i>标签主要用于文本，但是与标签的整体意图相比，这是一个很小的细节。这个标签的重要问题不是它包含什么格式的内容，而是那个内容的含义是什么。

当您认为网站上的“文本”和“图标”之间的界线几乎不存在时，尤其如此。文本可能看起来更像一个图标（例如在日语示例中）或一个图标看起来更像是文本（例如在显示“提交”的jpg按钮或带有重叠字幕的猫照片中），或者可以用替换或增强文本通过CSS生成图像。文字，图像-谁在乎？全部内容。只要所有人（有缺陷的人，有缺陷的浏览器，搜索引擎蜘蛛以及其他各种类型的机器）都能理解这一含义，我们就可以完成工作。

因此，规范的撰写者没有想到（或选择）澄清这一事实，不应束缚我们所做的一切有意义的事情，这与标签的精神是一致的。该<a>标签原本打算将用户带到其他地方，但是现在它可能会弹出一个灯箱。大吼了吧？如果有人在赶上规格之前就想出了如何在点击时弹出灯箱<a>的方法<span>，那么即使该标签与当前的定义并不完全一致，他们仍然应该使用该标签，而不是a ，因为它是最接近的并且是仍与标记的精神保持一致（“单击此处将发生某些事情”）。相同的处理方式<i>-无论您放入其中的是哪种类型的东西，或者无论您创造性地使用它，

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

单独携带图标类的替代选项是<span>，它当然没有语义。当一台机器问<span>它所包含的东西时，它说：“我不知道。可以是任何东西。” 但是<i>标签上写着：“我说的话与通常的话或陌生的用词不同。” 这与“我包含一个图标”不同，但是离它更近<span>了！

3.最终，通常的用法是正确的。

除了上述内容外，还值得考虑的是，机器阅读器（无论是搜索引擎，屏幕阅读器还是其他）可能会随时考虑到Facebook，Twitter和其他网站使用该<i>标签作为图标的考虑因素。他们不关心规范，而是关心通过任何必要手段从代码中提取含义。因此，他们可能会使用这种常用用法知识来简单地记录“这里可能有一个图标”，或者做一些更高级的操作，例如触发CSS的外观以暗示含义，或者谁知道。因此，如果您选择<i>在网站上使用for图标，则可能会提供比规范更多的含义。

而且，如果这种用法变得很普遍，则将来可能会包含在规范中。然后，您将遍历代码，将<span>s 替换为<i>s！因此，了解似乎是规范的方向可能是有意义的，尤其是当它与当前规范没有明显冲突时。通用用法比其他方法更倾向于规定语言规则。如果您足够大，您还记得“网站”这个词是新词时的正式拼写吗？词典坚持必须有一个空间，网络必须大写。这有语义上的原因。但是常用用法说：“无论如何，这很愚蠢。我使用的是“网站”，因为它更简洁，看起来更好。” 不久之后

4.所以我要继续使用它。

因此，<i>由于规格的原因，它为机器提供了更多的含义，因为我们很容易将“ i”与“ icon”相关联，并且它对人类也具有更多的含义，并且它只有一个字母长。赢得！而且，如果您确保在<i>标签内或标签旁边包含等效的文本（如Twitter一样），则屏幕阅读器会了解点击回复的位置，如果CSS未加载，则该链接可用，而人类阅读器则效果很好视力和不错的浏览器会看到一个漂亮的图标。考虑到所有这些，我看不到不利之处。

昆汀的答案明确指出，i不应使用标签来定义图标。

但是，霍莉（Holly）提出这span本身没有任何意义，因此投票赞成i代替span标签。

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

我认为正确的方法是

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

这解决了没有alt标签的问题，span并使视障人士可以访问。这是语义上的，不会滥用任何标记。

我的猜测：因为Twitter认为需要支持旧版浏览器，否则它们将使用:before/ :after伪元素。

旧版浏览器不支持我提到的那些伪元素，因此它们需要对图标使用实际的HTML元素，并且由于图标没有'exclusive'标签，因此它们仅与该<i>标签一起使用，并且所有浏览器都支持该标签。

他们当然<span>可以像您一样使用a ，（完全可以），但是可能由于我上面提到的原因加上Quentin提到的原因，这也是Bootstrap使用该<i>标记的原因。

当出于样式原因而使用额外的标记时，这是一个不好的做法，这就是发明伪元素，将内容与样式分开的原因……但是当您发现需要支持旧版浏览器时，有时您会被迫进行此类操作的东西。

PS。该图标开始与事实“我”和有一个<i>标签，完全是巧合。

对于这里所有其他人的答案，我采取完全不同的方法。让我为我的解决方案添加前缀，并说出有时会破坏标准和约定，尤其是在标准HTML词法标记定义的上下文中，这样来争论。

没有什么可以阻止您创建对它的用途具有自我描述性的自定义元素。

现代浏览器甚至IE 6+（带有shim）都可以支持以下功能：

<icon class="plus">

要么

<icon-add>

只要确保将标签标准化即可：

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

并在需要支持IE9或更早版本的情况下使用填充程序（请参阅下面的文章）。

查看此StackOverflow帖子：

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

为了进一步说明我的观点，Google的Angular Directives和新的Polymer项目都采用了自定义HTML标签的概念。

我认为这看起来很糟糕-因为我最近正在开发一个Joomla模板，并且由于W3C使用的是<i>标签并且已经过时，所以我一直使该模板失败，因为它最初使用的是斜体显示，现在通过CSS完成不再是HTML。

确实做错了，因为当我看到它时，我浏览了模板并将所有<i>标签更改为<span style="font-style:italic">，然后想知道为什么整个模板看起来很奇怪。

这是用<i>这种方式使用标记的一个好主意的主要原因-您永远不知道随后谁会看您的作品，并且“假设”您真正想做的是将文本斜体而不是显示图标。我刚刚在网站上放了一些图标，并使用以下代码完成了操作

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

这样一来，我将所有图标都放在一堂课中，因此我所做的任何更改都会影响所有图标（例如，我希望它们变大或变小，或使边框变圆等），替代文字为屏幕阅读器提供了一个告诉别人的机会图标而不是仅仅得到“斜体文本，斜体结尾”（我不完全知道屏幕阅读器如何阅读屏幕，但我想是那样的东西），标题还为用户提供了将鼠标悬停在上面的机会。图片，并获得工具提示，告诉他们图标是什么，以防万一他们找不到它。比使用<i>- 更好，它还通过了W3C标准。

当我想在链接<a>标签内放置绝对位置的图标时，我也发现这很有用。

我首先考虑了<img>标签，但是链接内那些标签的默认样式通常具有边框样式和/或阴影效果。另外，在<img>不定义“ src”属性的情况下使用标记是错误的，而我使用的是背景图像样式表声明，这样图像就不会出现拖影现象。

此时，您正在考虑诸如<span>或<i>- 的标记，在这种情况下<i>，这种图标的意义就很大。

总而言之，我认为除了直观之外，它的好处还在于，它只需对样式表进行最少的调整，即可使该标签作为图标工作。