我应该用标签图标而不是?

小开

最佳答案

为什么他们使用标签来显示图标?

因为它是:

短
i代表图标(虽然在HTML中不是)

这不是不好的做法吗?

可怕的实践。这是性能对语义的胜利。

小开

我的猜测是:因为Twitter看到了支持旧浏览器的需要，否则他们将使用:before / :after伪元素。

传统浏览器不支持我提到的那些伪元素，所以他们需要为图标使用一个真正的HTML元素，因为图标没有“专属”标签，他们只是使用了标签，所有的浏览器都支持这个标签。

他们当然可以使用，就像你一样(这完全没问题)，但可能是因为我上面提到的原因加上昆汀提到的原因，这也是Bootstrap使用标签的原因。

当你出于样式原因使用额外的标记时，这是一个糟糕的做法，这就是为什么要发明伪元素，将内容与样式分开…但是当您看到支持旧浏览器的需求时，有时您不得不做这些事情。

PS:图标以“我”开头，并且有一个标签，这完全是巧合。

小开

我说得有点晚了，但我自己思考的时候看到了这一页。当然，我不知道Facebook和Twitter是如何证明它的价值的，但以下是我自己的思考过程。

最后，我得出结论，这种做法并不是没有语义的(这是一个词吗?)事实上，除了简短和“i”这个美好的联想之外，“图标”;我认为，当直接使用<img>标记不实用时，它实际上是最语义化的图标选择。

1. 使用方法与规范一致。

虽然这可能不是W3的主要想法，但在我看来，的官方规范可以很容易地容纳一个图标。毕竟，回复箭头符号表示“回复”;另一种方式。它表示一个读者可能不熟悉的技术术语，通常是斜体的。(“在Twitter这里，我们称之为回复箭头."”)它来自另一种语言:一种象征语言。

如果Twitter使用shout out或[Japanese character for reply](在英文页面上)来代替箭头符号，这将与规范一致。那么为什么不使用[reply arrow]呢?(这里我说的是严格的HTML语义，而不是可访问性，稍后我会讲到。)

据我所知，图标使用唯一明确违反规范的部分是“文本的跨度”。短语(当标签也不包含文本时)。很明显，标记主要用于文本，但与标记的整体意图相比，这是一个非常小的细节。对于这个标记来说，重要的问题不是它所包含内容的格式，而是该内容的含义。

当你考虑到"text"和“;icon"在网站上几乎不存在。文本看起来更像是一个图标(就像日本的例子)，或者图标看起来更像是文本(就像jpg格式的按钮，上面写着“提交”。或带有覆盖标题的猫照片)或文本可以通过CSS替换或增强图像。文字，图像——谁在乎呢?都是内容。只要每个人——有缺陷的人、有缺陷的浏览器、搜索引擎蜘蛛和其他各种机器都能理解这个含义，我们就完成了我们的工作。

因此，规范的作者没有考虑(或选择)澄清这一点，这一事实不应该束缚我们去做有意义的事情，这与标签的精神是一致的。<a>标签最初是为了将用户带到其他地方，但现在它可能会弹出一个lightbox。很了不起，对吧?如果有人知道如何在规范赶上之前点击弹出一个灯箱，他们仍然应该使用<a>标签，而不是标签，即使它与当前的定义不完全一致——因为它是最接近的，仍然符合标签的精神(“当你点击这里时，会发生一些事情”)。同理，——无论你把什么类型的东西放在里面，或者你如何创造性地使用它，它都表达了一个替代或单独术语的一般思想。

2. 标签为图标元素添加语义含义。

单独携带图标类的另一个选项是，当然它没有任何语义意义。当机器问EYZ0里面包含什么时，它会说:“我不知道。”可能是任何东西。”但是标签说:“我包含了一种不同于通常的表达方式，或者可能是一个不熟悉的术语。”这和“我包含一个图标”不一样。但它比更接近它!

3.最终，习惯用法就是正确的。

除此之外，值得考虑的是机器阅读器(无论是搜索引擎、屏幕阅读器还是其他什么)可能会在任何时候开始考虑Facebook、Twitter和其他网站使用标签作为图标。他们关心的不是规范，而是通过任何必要的手段从代码中提取意义。因此，他们可能会利用这种常用用法的知识，简单地记录“这里可能有一个图标”。或者做一些更高级的事情，比如触发一个CSS的含义提示，或者谁知道什么。因此，如果你选择在你的网站上使用作为图标，你可能会提供比规范更多的意义。

此外，如果这种用法得到广泛应用，将来可能会包含在规范中。然后您将通过您的代码，用's替换s !因此，接受规范的方向可能是有意义的，特别是当它与当前规范没有明显冲突的时候。通常的用法倾向于规定语言规则，而不是相反。如果你够大了，你还记得那个“网站”吗?官方拼写是这个词刚出现的时候吗?字典坚持认为必须有空格，Web必须大写。这是语义上的原因。但通常的说法是:“无所谓，那是愚蠢的。”我使用“网站”，因为它更简洁，看起来更好。”不久之后，字典正式承认这个拼写是正确的。

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

因此，对机器来说更有意义，因为规范，它对人类来说更有意义，因为我们很容易把“i”和“;加上“icon”，它只有一个字母长。赢了!如果你确保在标签内或标签旁边包含了相同的文本(就像Twitter所做的那样)，那么屏幕阅读器就会知道点击哪里来回复，如果CSS没有加载，链接也是可用的，视力好的人类读者和良好的浏览器也会看到一个漂亮的图标。考虑到这一切，我不认为有什么不利因素。

小开

我还发现这是有用的，当我想把一个图标的绝对定位在一个链接<a>标签。

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

在这一点上，您正在考虑像或这样的标签——在这种情况下，作为这种类型的图标非常有意义。

总而言之，除了直观之外，我认为它的好处是它需要最小的样式表调整才能使这个标签作为图标工作。

小开

我认为这看起来很糟糕-因为我最近在一个Joomla模板上工作，我一直在让模板失败，因为它使用了标签，这已经弃用了，因为它最初的用途是斜体字，现在是通过CSS而不是HTML来完成的。

这确实是一个很糟糕的做法，因为当我看到它时，我浏览了模板，并将所有的标签改为，然后想知道为什么整个模板看起来很奇怪。

这就是为什么以这种方式使用标签是一个坏主意的主要原因——你永远不知道谁会在之后看到你的作品，并“假设”你真正想做的是斜体文本而不是显示图标。我刚刚在一个网站上放了一些图标，我用下面的代码做到了

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

这样我就把我所有的图标都放在一个类中，所以我所做的任何改变都会影响所有的图标(比如我想让它们更大或更小，或圆形边界等)，alt文本让屏幕阅读器有机会告诉人们图标是什么，而不是可能只是“斜体字的文本，斜体字的结尾”(我不知道屏幕阅读器是如何阅读屏幕的，但我猜大概是这样)，标题还让用户有机会将鼠标移到图像上，并得到一个工具提示，告诉他们图标是什么，以防他们找不出来。比使用好得多——而且它也通过了W3C标准。

小开

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

但是，Holly认为span本身没有任何意义，并投票支持i而不是span标签。

很少有人建议使用img，因为它的语义和包含alt标签。但是，我们也不应该使用img，因为即使是空的src也会向服务器发送请求。# EYZ4

我认为正确的方法是，

# EYZ0

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

小开

在这里，我对其他人的回答采取了完全不同的方法。让我在解决方案的开头说明一下，有时标准和约定就是要被打破的，特别是在标准HTML词法标记定义的上下文中。

没有什么可以阻止您创建自定义元素，这些元素是自描述的。

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

<icon class="plus">

或

<icon-add>

只需要确保标签规范化:

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

如果你需要支持IE9或更早版本(见下文)，请使用垫片。

看看这篇StackOverflow帖子:

是否有一种方法在HTML5中创建自己的html标签

为了进一步说明我的观点，谷歌的Angular指令和新的Polymer项目都利用了自定义HTML标记的概念。

我应该用<i>标签图标而不是<span>?