首页 文章

我应该使用<i>标签代替<span>吗？ [关闭]

提问于
浏览 次
510

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

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

但，

来自HTML5 spec：

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

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

这不是一个坏习惯吗？

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

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

Update:

Bootstrap 3现在使用 span 作为图标 . Official Doc

html html5 semantic-markup

7 回答

  • 47

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

    但是，霍莉建议 span 本身没有任何意义，并投票赞成 i 而不是 span 标签 .

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

    我想，正确的方法是，

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

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

    回复于
  • 6

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

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

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

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

    这样我就知道屏幕阅读器如何读取屏幕了，但我想's something like that), and the title also gives the user a chance to mouse over the image and get a tooltip telling them what the icon is in case they can' t弄清楚了 . 比使用 <i> 好多了 - 而且它也通过了W3C标准 .

    回复于
  • 12

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

    我首先想到了 <img> 标签，但链接中这些标签的默认样式通常具有边框样式和/或阴影效果 . 另外，在没有定义"src"属性的情况下使用 <img> 标签感觉是错误的，而我也是如此 .

    此时你正在考虑像 <span> 或 <i> 这样的标签 - 在这种情况下 <i> 就像这种类型的图标一样有意义 .

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

    回复于
  • 533

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

    旧版浏览器不具有'exclusive'标记，它们只是带有 <i> 标记，并且所有浏览器都支持该标记 .

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

    它's a bad practice when you use extra markup for styling reasons, that'为什么pseudo-elements被发明，从风格不同的内容......但是当你看到需要支持旧版浏览器，有时你不得不做这类事情 .

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

    回复于
  • 239

    我完全采用一种完全不同的方法来解决其他人的问题 . 让我为我的解决方案添加前缀，并指出有时标准和约定意图被打破，特别是在标准HTML词法标签定义的上下文中 .

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

    Both modern browsers and even IE 6+ (w/ shim) can support things like:

    <icon class="plus">

    要么

    <icon-add>

    只需确保标记规范化：

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

    如果您需要支持IE9或更早版本，请使用垫片（请参阅下面的帖子） .

    Check out this StackOverflow Post:

    Is there a way to create your own html tag in HTML5

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

    回复于
  • 10

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

    因为它是：

    • 短

    • 我代表图标（虽然不是HTML）

    这不是一个坏习惯吗？

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

    回复于
  • 2

    我有点迟到了，但是在自己思考的时候遇到了这个页面 . 当然，我不知道Facebook或Twitter如何证明它是合理的，但这是我自己的思考过程，它的 Value .

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

    1. The usage is consistent with the spec.

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

    如果Twitter不使用箭头符号，则使用 <i>shout out</i> 或 <i>[Japanese character for reply]</i> （在英文页面上），这与规范一致 . 那为什么不 <i>[reply arrow]</i> ？ （我'm talking strictly HTML semantics here, not accessibility, which I'我会到 . ）

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

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

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

    2. The <i> tag adds semantic meaning to an icon element.

    单独携带图标类的替代选项是 <span> ，这当然没有任何语义含义 . 当一台机器询问 <span> 它包含什么时，它会说，"I dunno. Could be anything."但是 <i> 标签说，"I contain a different way of saying something than the usual way, or maybe an unfamiliar term." 's not the same as 411288 but it'比 <span> 更接近它了！

    3. Eventually, common usage makes right.

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

    此外，如果这种用法变得普遍，将来可能会包含在规范中 . 然后你将完成你的代码，用 <i> 's! So it may make sense to get on board with what seems to be the direction of the spec, especially when it doesn'替换 <span> 与当前规范明显冲突 . 常见用法往往比其他方式更多地规定语言规则 . 如果你已经够大了，你还记得"Web site"是这个词是新词的官方拼写吗？字典坚持必须有空间，Web必须大写 . 这有语义上的原因 . 但常见的用法说，"Whatever, that's stupid. I'm using 'website' because it's more concise and looks better."不久，词典正式承认拼写正确 .

    4. So I'm going ahead and using it.

    因此， <i> 为机器提供了更多的意义，因为规范，它为人类提供了更多的意义，因为我们很容易将"i"与"icon"关联起来，并且它只有一个字母长 . 赢得！如果你确保在 <i> 标签内或旁边包含等效文本（就像Twitter那样），那么屏幕阅读器就会明白在哪里点击回复，如果CSS没有看到缺点，那么该链接是可用的 .

    回复于

相关问题