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

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

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

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

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

对于这里所有其他人的答案，我采取完全不同的方法。让我为我的解决方案添加前缀，并说出有时会破坏标准和约定，尤其是在标准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标签的概念。

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

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

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

我认为正确的方法是

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

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

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

因为它是：

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

这不是一个坏习惯吗？

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